<template>
	<!--竖屏直播-->
	<div class="portrait-screen-live-box" :style="bgImagUrl ? {backgroundImage:'url('+bgImagUrl+')'} : {} "
		:class="[liveBoxClass]">
        <Privacy v-if="isPrivacy"></Privacy>
		<van-notice-bar v-if="isAudit" left-icon="info-o" scrollable text="您当前的直播间为审核状态，仅用于预览，请尽快完成审核" />
		<!-- <Header  :headerObj = 'headerObj'  /> -->
		<HeaderLive :roomInfo='roomInfo' :roomNum='roomNum' :isLiveMore='isLiveMore'
			:dataArrayRightTop='activityArray[2]' :isActivityRightTop="isActivity[2]" @formChildMsg='formChildData' />
		<!-- 左下活动组件 -->
		<ActiveLeftBottom @click.native='clickActivity("leftBottom")' :dataArray='activityArray[1]'
			v-if="isActivity[1] && $store.state.clearDom[0].open" />
		<!-- 前置图片div -->
		<div class="front-pictures-box">
			<div class="front-img-top" v-if="isFrontImg">
				<div class="front-top" :style='"backgroundImage: url("+`${frontTopImg}`+")"'></div>
			</div>
			<VideoCom ref='videoCom'  v-if="!isPreviewPage"  :videoInfo='roomInfo.roomInfo' type='hScreen'
				status="living" />
			<div class="front-img-bottom" v-if="isFrontImg">
				<div class="front-bottom" :style='"backgroundImage: url("+`${frontBottomImg}`+")"'></div>
			</div>
		</div>
		<!-- 报名入口内容组件-->
		<ApplyContentCom v-if='isApplyContentCom' :rewardInfo='rewardInfo' @formChildMsg='formChildData' />
		<div class="wrap-right-box">
		</div>
		<div class="wrap-left-box">
		</div>
		<!-- <div :class="[videoCoverBoxClass]" v-if="videoCoverBox">
			<img class="cover-video-img" :src="roomInfo.roomInfo.preImagUrl"
				v-show="roomInfo.roomInfo.preImagUrl && roomInfo.roomInfo.preImagUrl != '' " />
			<div class="play-btn" id="bofang" v-if="isPlayBtn" @click="playBtn"></div>
		</div> -->
	   <!--跑马灯组件 animate__animated animate.css库class -->
    <MarqueeBar :isMarquee='isMarquee' :text='marqueeArray[0]' @formChildMsg='formChildData' :noticeBbarClass="noticeBbarClass"></MarqueeBar>
		<!--红包组件 enterType 进入的方式  redListParent历史红包列表-->
		<RedPacketCom v-if="isRedPacketCom" :key="renderCom" :redEnterType='enterType' :redPacketData='redPacketData'
			:sid='roomInfo.roomInfo.sid' :list='redListParent' @formChildMsg='formChildData' />
		<div class="top-shadow"></div>
		<div class="clear-screen-box" v-show="$store.state.clearDom[0].open">
			<!-- 置顶留言面板 -->
			<transition name="actionSheetBox" @before-enter="sheetBeforeEnter" @enter="sheetEnter"
				@after-enter="sheetAfterEnter" @before-leave="sheetBeforeLeave" @leave="sheetLeave">
				<StickyMsg v-if="showSpeakerSheet" :topWord='roomInfo.roomInfo.topWord' @formChildMsg='formChildData' />
			</transition>
			<!--开播提醒成功提示组件-->
			<LiveRemindSuccess v-if='isLiveRemindSuccess' @formChildMsg='formChildData' />
			<!--进入直播间提示-->
			<transition name="showRect" @before-enter="TipUnBeforeEnter" @enter="TipUnEnter"
				@after-enter="TipUnAfterEnter" @before-leave="TipUnBeforeLeave" @leave="TipUnLeave"
				@after-leave="TipUnAfterLeave" :css="false">
				<div v-show="marqueeTipUnShow" v-if="$store.state.clearDom[1].open" class="marquee-tip"
					:class="[marqueeTipClass]">
					<p><span>{{marqueeTipUnArray[0]}}</span>{{comeTip}}</p>
				</div>
			</transition>
			<!--底部黑色渐变-->
			<div class="gradient-color-bg"></div>
			<!-- 商品讲解组件 -->
			<ProductExplain @getProduct="getProduct" :roomInfo="roomInfo" v-if="isProductShow && $store.state.clearDom[0].open"
				:productObj="productObj" />
			<!-- <MessageBox  :imTextMsg= 'imTextMsg'  /> -->
			<div class="message-box" ref="msgWrapper" v-show="$store.state.clearDom[2].open">
				<!--<ul class="message-box-ul">
					<li class="message-box-li">
						<img src="../../../assets/images/coin-live.png"/>
						<span class="nick-name">光大银行：</span><span class="message-text">我是置顶文字我是置顶文字我是置顶文字我是置顶文字</span>
					</li>
				</ul>-->
				<ul class="message-box-ul" ref="msgContent" @click="clickMsgContent">
					<!--<li class="message-box-li">
						<img src="../../../assets/images/coin-live.png"/>
						<span class="nick-name">光大银行：</span><span class="message-text">我是置顶文字我是置顶文字我是置顶文字我是置顶文字</span>
					</li>-->
					<!--<li class="message-box-li">
						<img src="../../../assets/images/coin-live.png"/>
						<span class="nick-name">臭豆腐西施：</span><span class="message-text">这主播的内容还挺受用的这主播的内容还挺受用的还挺受用的还挺受用的还挺受用的</span>
					</li>
					<li class="message-box-li">
						<span class="nick-name">臭豆腐西施：</span><span class="message-text">这主的还挺受用的</span>
					</li>-->
				</ul>
			</div>
			<!--投问答弹出组件-->
			<TouWenDaCom :roomInfo='roomInfo' @formChildMsg='formChildData' ref="childRightWrap" />
		</div>
		<!-- 快捷消息回复 -->
		<div class="quickMessage" v-show="$store.state.clearDom[0].open">
			<ul>
				<li v-for="(item,index) in quickMessageList" :key="index" @click="clickmessage(item)">{{item}}</li>
			</ul>
		</div>
		<FooterCom ref='footerComRef'  :roomInfo='roomInfo' :shoppingDataInfo='shoppingDataInfo'
			@formChildMsg='formChildData' :quickMessage='quickMessage' />
		<!-- 底部弹出 动作面板 -->
		<!-- liveWinArray 直播间抽奖中奖数组 -->
		<transition appear name="actionSheetBox" @before-enter="sheetBeforeEnter" @enter="sheetEnter"
			@after-enter="sheetAfterEnter" @before-leave="sheetBeforeLeave" @leave="sheetLeave"
			@after-leave="sheetAfterLeave">
			<ActionSheet :is='showActionSheet' :activeDataArray='activeDataArray' :activeTitle='activeTitle'
				:liveWinArray='liveWinArray'  :roomInfo='roomInfo'
				@formChildMsg='formChildData' :sheetTitle="sheetTitle" :productObj="productObj" :isPoScreen="true">
			</ActionSheet>
		</transition>
		<!-- 送礼物操作面板 -->
		<div v-if="showSendMask" class="gift-bg-mask" @click="hideGiftPanelHandle"></div>
		<transition appear name="sendGiftBox" @before-enter="sheetBeforeEnter" @enter="sheetEnter"
			@after-enter="sheetAfterEnter" @before-leave="sheetBeforeLeave" @leave="sheetLeave">
			<SendGift v-if='showGiftPanelFlag' :roomInfo='roomInfo' @pushParent="pushGifts">
			</sendGift>
		</transition>
		<!--送礼物提示-->
		<transition name="sendGiftPanel" @before-enter="TipUnBeforeEnters" @enter="TipUnEnters"
			@after-enter="TipUnAfterEnters" @before-leave="TipUnBeforeLeaves" @leave="TipUnLeaves"
			@after-leave="TipUnAfterLeaves">
			<GiftTips v-show='showSendGiftFlag' v-if="$store.state.clearDom[1].open"></GiftTips>
		</transition>
		<!--邀请卡组件-->
		<InvitationCard v-if='isInvitationCard' @formChildMsg='formChildData' fromComPage = "live"  :liveInfo="roomInfo.roomInfo" />
		<!-- 透明蒙层组件 -->
		<ShowMask v-if="showMask" @formChildMsg='formChildData' />

		<!--抽奖组件-->
		<TurntableCom v-if='isTurntable' :key='lotteryNum' :winInfoData='winInfoData' :startLotteryObj='startLotteryObj'
			@formChildMsg='formChildData' :roomInfo="roomInfo" fromCom="fromLivePrizeCom" />
		<!-- 全局背景层组件 -->
		<GlobalMask @formChildMsg='formChildData' v-if="isGlobalMask" />
		<PreviewPage v-if="isPreviewPage" :shoppingDataInfo='shoppingDataInfo' :roomInfo='roomInfo'
			@formChildMsg='formChildData' />
		<!-- <van-popup v-model="vantPopupShow" :close-on-click-overlay="popupObj.isPopupGlobalMask" :round="popupObj.round" :position="popupObj.position" overlay-class="popClass"
			:overlay='popupObj.isOverlay' :style="{width:popupObj.width,height:popupObj.height }">
			<component :is="isPopupCom" :liveMoreArray='liveMoreArray' typeFrom="live" :roomInfo="roomInfo"
				@formChildMsg='formChildData'></component>
		</van-popup> -->
		<van-dialog v-model="showRatioDialog" :showConfirmButton="false" :closeOnClickOverlay="true">
			<span>请选择要切换的清晰度</span>
			<van-radio-group v-model="tidRadio">
				<van-radio name="0" icon-size="16px">
					原画
					<template #icon="props">
						<img class="img-icon" :src="props.checked ? roundChecked : roundUncheck" />
					</template>
				</van-radio>
				<van-radio name="1" icon-size="16px">
					高清
					<template #icon="props">
						<img class="img-icon" :src="props.checked ? roundChecked : roundUncheck" />
					</template>
				</van-radio>
				<van-radio name="2" icon-size="16px">
					流畅
					<template #icon="props">
						<img class="img-icon" :src="props.checked ? roundChecked : roundUncheck" />
					</template>
				</van-radio>
			</van-radio-group>
		</van-dialog>
		<!-- 赞动画 -->
		<ZanAnimation></ZanAnimation>
		<canvas class="canvas-box" ref="canvasBox" id="canvasBox"></canvas>
        <!-- <img  class="canvas-img" :src="canvasImg" > -->
        <!-- 举报留言弹窗 -->
		<van-popup v-model="vantPopupShow" :close-on-click-overlay="popupObj.isPopupGlobalMask" :round="popupObj.round"
				:position="popupObj.position" overlay-class="popClass" :overlay='popupObj.isOverlay'
				:style="{width:popupObj.width,height:popupObj.height }"  @click-overlay = "clickVanOverlay" >
				<component :is="isPopupCom"  :meetingMsg="meetingMsg" :shoppingDataInfo='shoppingDataInfo' :reportMsgObj="reportMsgObj" :liveMoreArray="liveMoreArray" typeFrom="live" :roomInfo="roomInfo"
					@formChildMsg='formChildData'>
				</component>
		</van-popup>
		<BuyRisk v-if="isBuyRisk" :buyRiskObj ="buyRiskObj" :shoppingLinkInfo="shoppingLinkInfo" @formChildMsg="formChildData"></BuyRisk>
		<!-- 第三方外链返回按钮 -->
    <BackHomePage v-if="isJump" :toJump="toJump" />

    <!-- 倒计时 -->
    <div
      v-if="isShowCountDown"
      class="lucky c-d "
      data-type="7"
      @click="openToolPage"
    >
      <!-- <img
        src="../../../assets/lucky/icon/choujiang-2.png"
        v-if="countStatus == 10"
      /> -->
      <img src="../../../assets/lucky/icon/choujiang-1.png"/>
      <div class="text" v-if="countStatus == 7">{{ countdown }}</div>
      <!-- <div class="text" v-if="countStatus == 10" style="color: #913B00;">
        已结束
      </div> -->
      <div class="text" v-if="countStatus == 1 || countStatus == 10">马上开始</div>
    </div>

    <!-- 倒计时组件 -->
    <countdown
      ref="countdown"
      id="countdown"
      v-if="isShowCountDown"
      :appId="appId"
      :activityId="activityIdDown"
      :socketType="socketType"
      :roomInfo="roomInfo.roomInfo"
      :roomId="roomId"
      :time="countdown"
    ></countdown>
	</div>
</template>

<script>
    import Privacy from "@/pages/homeComponents/privacyText"//隐私条款
	import HeaderLive from '@/pages/liveRoomPages/components/headerLive' //头部
	import LiveRightNav from '@/pages/liveRoomPages/components/liveRightNav'; //右边弹出框内容
	import LiveTopPopup from '@/pages/liveRoomPages/components/liveTopPopup'; //顶部弹出框内容
	import PreviewPage from '@/pages/liveRoomPages/components/previewPage' //预告页
	import config from "../../../config"
	import webim from "../../../util/imSdk";
	import baseIm from "../../../util/imBase";
	import fun from "../../../util/function";
	import socket from "../../../util/Socket";
	import wxApi from "../../../util/wxApi";
	import liveMixin from "@/mixins/liveMixin.js"
	import liveBackMixin from "@/mixins/liveBackMixin.js"
	import VideoCom from '../../../components/videoCom.vue'; //视频播放
	import InviteBoxCom from './inviteBoxCom.vue'; //邀请榜按钮
	import FooterCom from './footerCom.vue'; //底部按钮
	import ProductExplain from './liveProducts.vue' //商品讲解组件
	import TouWenDaCom from './touWenDaCom.vue'; //右边互动按钮组件
	import MoreOption from "../../../components/actionSheet/moreOption"; //更多 面板
	import OrderList from "../../../components/actionSheet/orderList"; //商品列表
	import SendGift from "../../../components/actionSheet/sendGift"; //送礼打赏
	import GiftTips from "../../../components/actionSheet/giftTips.vue"; //送礼提示

	import LiveMinePrizeList from '@/components/actionSheet/liveMinePrizeList'; //直播间我的礼物列表
	import ApplyContentCom from './applyContentCom.vue'; //报名入口内容组件
	import LiveInvitationList from "../../../components/actionSheet/liveInvitationList"; //邀请榜
	import ZxjtLiveInvitationList from "../../../components/actionSheet/zxjtLiveInvitationList.vue"
	import RedPacketCom from './redPacketCom.vue'; //红包组件
	import InvitationCard from '@/pages/invitationCard/newInvitationCard.vue'; //邀请卡
	import LookingBack from "../../../components/actionSheet/lookingBack"; //往期回看
	import HotProduct from "../../../components/actionSheet/hotProduct"; //热门产品
	import CurProduct from "../../../components/actionSheet/curProduct"; //图文
	import CurProduct2 from "../../../components/actionSheet/curProduct2"; //图文2
	import Reminder from "../../../zyzqPages/components/reminder.vue"; //温馨提示
	import LiveRemindSuccess from '@/components/liveRemind/liveRemindSuccess'; //开播提醒成功组件
	import ShowMask from '@/components/actionSheet/showMask' //透明蒙层 点击可关闭操作面板
	import StickyMsg from "../../../components/actionSheet/stickyMsg.vue"; //置顶留言
	import TurntableCom from '@/components/lotteryCom/turntableCom'; //抽奖组件
	import GlobalMask from '@/components/globalMask'; //全局背景层组件

  // 导入倒计时组件
  import countdown from "../components/countdown/index.vue";

	import {
		activityArrayLoc
	} from '@/store/dataList.js'; //模拟假数据
	import FooterPop from '@/components/activeCom/footerPop';

	import ActiveLeftBottom from '@/components/activeCom/activeLeftBottom';
	import ApplyInfo from '@/components/applyInfo' //报名 中奖信息组件
	import ReportPop from '@/components/reportPop' //举报
	import MessageBox from '@/pages/liveRoomPages/components/messageBox' //留言
	import BScroll from '@better-scroll/core'
	import ZanAnimation from '../../../components/zanAnimation.vue'
	import MarqueeBar from '@/components/marqueeBar';//跑马灯
	import meetingSummaryCom from '@/pages/liveRoomPages/components/meetingSummaryCom'//会议纪要弹出框
	import meetingMaterialCom from '@/pages/liveRoomPages/components/meetingMaterialCom'//会议材料弹出框
	import cleckMaterialCom from '@/pages/liveRoomPages/components/cleckMaterialCom'//查看会议材料弹出框
	import downloadMaterialCom from '@/pages/liveRoomPages/components/downloadMaterialCom'//下载会议材料弹出框
	import {shoppingInfo } from '@/util/api.js'
	import BackHomePage from '@/components/backHomePage' //三方外链返回首页按钮
	import dayjs from 'dayjs';
	export default {
		props: {
			roomInfo: Object, //房间信息
			isLsPoScreen: String
		},
		components: {
			VideoCom,
			InviteBoxCom, //邀请榜按钮
			FooterCom, //底部组件
			TouWenDaCom, //右边互动按钮组件
			ApplyContentCom,
			MoreOption, //更多 面板
			OrderList, //商品列表
			SendGift, //送礼打赏
			GiftTips, //送礼提示
			LiveInvitationList, //邀请榜
			ZxjtLiveInvitationList, //中信建投邀请榜
			RedPacketCom, //红包组件
			InvitationCard, //邀请卡
			LookingBack,
			HotProduct,
			CurProduct,
			CurProduct2, //图文2
			Reminder,
			LiveRemindSuccess, //开播提醒成功组件
			ShowMask, //透明蒙层
			ProductExplain, // 商品讲解
			StickyMsg, //置顶留言
			TurntableCom, //抽奖组件
			GlobalMask, //全局背景层组件
			LiveMinePrizeList, //直播间我的礼物列表
			FooterPop, //底部弹出层组件
			ActiveLeftBottom, //左下角活动
			ApplyInfo, //中奖信息组件
			ReportPop, //举报
			MessageBox, //留言
			HeaderLive,
			PreviewPage, //预告页
			LiveRightNav,
			LiveTopPopup,
			ZanAnimation, //赞 上方效果
			Privacy, //隐私条款
			MarqueeBar,//跑马灯
			BackHomePage,//三方外链返回首页按钮
			meetingSummaryCom,//会议纪要弹出框
			meetingMaterialCom,//会议材料弹出框
			cleckMaterialCom,//查看会议材料弹出框
			downloadMaterialCom,//下载会议材料弹出框

      countdown
		},
		data() {
			return {
        isPrivacy:false, //隐私政策
				quickMessageList: [], // 快捷消息列表
				quickMessage: "", //点击选中的快捷消息
				roomId: this.$route.params.roomid, //房间id
				roomInfo: this.roomInfo, //缓存数据
				videoCoverBox: true,
				isApplyContentCom: false, //报名内容页面
				isShoppingShow: false, //商品列表显示不显示
				isPlayBtn: false, //播放按钮显示不显示
				shoppingNum: null, //商品数量
				shoppingDataInfo: {}, //商品信息
				marqueeTipUnArray: [], //进入房间数组
				marqueeTipUnShow: false, // 动画的执行与不执行
				marqueeTipClass: '', //进入房间提示class
				liveRoomInterval: '', //房间定时器
				computeLeft: '', //计算进入房间提示滚动距离

				showActionSheet: '', //更多  热门产品 往期回看 商品列表
				sheetTitle: '',
				// giftMessageQueue: this.$store.state.giftMessageQueue,	// 礼物提示动画队列
				redListParent: [], //红包历史数据数组
				enterType: '', //红包进入方式
				isRedPacketCom: false, //红包组件显示
				renderCom: 0, //强制刷新红包组件
				lotteryNum: 0, //强制刷新抽奖组件
				redPacketData: {}, //单个红包信息
				isEnterMessage: false, //进入房间提示开启  true 打开 false 关闭
				isInvitationCard: false,

				//打赏
				rewardInfo: '', //打赏信息
				//im相关
				un: '',
				nickname: "", // 昵称
				wxpic: "",
				selSess: null,
				selType: webim.SESSION_TYPE.GROUP,
				//直播间人数
				roomNum: '', //房间人数
				roomRealNum: '', //真是人数
				isCkFull: false,

				scrollSwitch: true, //分页开关
				pageId: ' ', //分页记录的锁定的id
				fenYePage: 1, //分页页数  从1开始
				totalPage: '', //总页数

				isMarquee: false, //跑马灯
				marqueeArray: [], //跑马灯数组
				isScroll: true,
				comeTip: '来到直播间', //进入房间提示语
				currentUn: this.$store.state.userInfo.un, //当前用户un
				liveRemind: '', //开播提醒状态
				isLiveRemindSuccess: false, //开播提醒成功组件显示
				isProductShow: false, // 商品讲解组件默认显示
				productObj: {}, //商品讲解对象
				bgImagUrl: '', //直播大背景图
				showSpeakerSheet: false, //置顶留言面板
				topWordText: '', //置顶留言标题
				videoCoverBoxClass: '', //封面图
				isVideoDom: false, //视频dom  show
				getPlatform: fun.getPlatform(), //app wx
				liveBoxClass: '', //最外层class
				isTurntable: false, //抽奖组件
				startLotteryObj: '', //开始抽奖信息
				isZyzqApp: window.isZyzqApp,
				liveWinArray: [], //直播间抽奖中奖列表
				winInfoData: {}, //直播间单个奖品
				isActivity: [false, false, false, false], //活动位置显示数组
				activityArray: [], //活动数组
				activeDataArray: [], //单个活动数组
				activeTitle: '', //活动标题
				frontTopImg: '', //头部前景图
				frontBottomImg: '', //底部前景图
				isFrontImg: false, //前景图显示
				userRl: null, //国盛证券是否登录资金账户
				isAuthorizePass: false, //继续观看 继续预约
				isAudit: false,
				timerNum: 0,
				timerNumSwitch: true,
				imTextMsg: {},
				loveSocketObj: {},
				isPreviewPage: false,
				qaTypetoBetext: {
					"1": "答题",
					"2": "邀请",
					"3": "问卷",
					"4": "投票",
					"5": "红包",
					"6": "报名",
				},
				vantPopupShow: false,
				isPopupCom: '', //弹出框
				popupObj: {
					'position': '',
					'width': '',
					'height': '',
					'isOverlay': true,
					'round':false,//圆角
					'isPopupGlobalMask':true,//蒙层是否点击消失
				},
				headerObj: {
					'isShowBack': true,
					'isShowClose': false,
					'isShowMine': false,
					'fromType': 'mine',
					'titleText': '蜻蜓Live',
					'color': 'white'
				},
				isLiveMore: false,
				liveMoreArray: [],
				banner: [],
				txBase: '', //用户头像
				postImg: '', //封面图
				clockImg: require('@/assets/images/invite/clock.png'), //时间icon
				mengCeng: require("@/assets/images/invite/mengCeng.png"), //蒙层
				mengCengApp: require("@/assets/images/inviteApp/mengceng.png"), //蒙层
				wBg: require('@/assets/images/invite/s_white.png'), //白底
				reduceVal: 1200,
				canvasImg:'',
				sassRoomBg:require('../../../assets/images/room_bg.png'),//sass默认房间背景
				noticeBbarClass:'',//跑马灯效果
				buyRiskObj:null,
				isBuyRisk:false,//是否打开购物车购买风险弹窗
				shoppingLinkInfo:{},//购物车当前点击商品信息
				isJump: false, // 是否为第三方外链进入
      	        toJump: '', //从那个机构跳转过来
				/* 播放器相关 */
				tid: '', // 清晰度 '' = 原画 saas-lhd = 高清 saas-lsd = 标清
				isRTC: sessionStorage.getItem('notRTC') ? false : false, // 低延迟标识
				showRatioDialog: false, // 清晰度dialog标识
				tidRadio: '0',
				roundChecked: require('@/assets/images/round_checked.png'),
				roundUncheck: require('@/assets/images/round_uncheck.png'),
				riskWarnTencent: '「温馨提示：请您注意本次会议的参会人员范围，严禁将内部会议对外转发，白名单会议仅限受邀的适当性匹配客户参会。路演内容仅供参考，不构成投资操作建议。金融产品过往业绩不代表未来，市场有风险，投资需谨慎，参与投资前请先仔细阅读产品合同书和风险揭示书。」',
				meetingMsg:{},//给会议材料组件的数据

        isShowCountDown: false, // 倒计时按钮
        countdown: "", // 倒计时
        activityIdDown: 0, // 倒计时活动id
        socketType: "", // socket消息类型
        time: 600,
        countStatus: 1
			}
		},
		mixins: [baseIm, socket, wxApi, liveMixin,liveBackMixin],
		computed: {
			riskTipEd() {
				return this.$store.state.setRiskTip;
			},
			showGiftPanelFlag() { //送礼操作面板 显示
				return this.$store.state.giftPanel.showGiftPanelFlag
			},
			showSendMask() { //送礼操作面板外层透明蒙版  显示
				return this.$store.state.giftPanel.showSendMask
			},
			showMask() { //操作面板外层透明蒙版 显示
				return this.$store.state.showMask
			},
			isGlobalMask() { //操作面板外层透明蒙版 显示
				return this.$store.state.globalMask.isShow
			},
			showSendGiftFlag() { //送礼提示 显示
				return this.$store.state.showSendGiftFlag
			},
			giftMessageArray() {
				return this.$store.state.giftMessageQueue
			},
			sysInfo() {
				return this.$store.state.SysOrgInfo;
			},
			uinfo() {
				return this.$store.state.userInfo;
			},
			wacthIconUn() { //优化 监听 icon un
				return this.$store.state.SysOrgInfo.icon;
			},
			isGetNumCfg() {
				if (this.isCkFull == false && this.roomRealNum > 0 && this.roomInfo.roomInfo.maxNum != undefined && this
					.roomInfo.roomInfo.maxNum > 0) {
					this.isCkFull = true
					if (this.roomRealNum >= this.roomInfo.roomInfo.maxNum) {
						fun.toastMessage("抱歉直播间人数达到上限，请稍后再来", 1666)
						let _this = this
						setTimeout(() => {
							_this.$router.push(`/${this.$channel}/home`)
						}, 1666)
					}
					return true
				} else {
					return false
				}
			},
			isTencentLive() {
				return this.roomInfo.roomInfo.partnerType == 12
			},
		},
		watch: {
			tidRadio(flag) {
				this.$bus.$emit("changeRatio", flag);
				this.showRatioDialog = false
			},
			riskTipEd: { // 检查是否签约
				immediate: true,
				handler(val, oldVal) {
					if (this.$channel == 'zyzq' && !val) {
						fun.getRoomSignUp(this.roomId, 0) //签约类提示
					};
				}
			},
			uinfo(curVal, oldVal) {
				if (curVal.un != undefined && curVal.un.length > 0) {
					this.un = curVal.un;
					this.nickname = curVal.nickname;
					this.wxpic = curVal.wxpic;
					//解决异步userInfo返回
					this.getImInit();
					this.getCardER();
					this.invitationCardFun(this.wxpic);
				}
			},
			wacthIconUn(newValue, oldValue) {
				this.wxRegister(this.wxRegCallback);
			},
			isGetNumCfg(v, ov) {},
		},
		created() {
			const  { appVersionBoolean } =  this.$store.state;
			if(appVersionBoolean && window.terminal.isZxjtApp){//竖屏&& 版本大于 8.2.2
				this.$store.commit('setShowMarginTop',false);//设置头部
			}
			// 清晰度和低延迟修改
			this.$bus.$on('changeTidAndRtc', ({
				tid,
				isRTC
			}) => {
				if (tid !== undefined) this.tid = tid
				if (isRTC !== undefined) this.isRTC = isRTC
				this.getVideoSrc()
			})
			if (window.terminal.isZxjtApp) {
				this.banner = [{
						url: require('@/assets/images/inviteApp/1.png'),
						title: "蓝色简约"
					},
					{
						url: require('@/assets/images/inviteApp/2.png'),
						title: "限时抢购"
					},
					{
						url: require('@/assets/images/inviteApp/3.png'),
						title: "看直播赢好礼"
					},
					{
						url: require('@/assets/images/inviteApp/4.png'),
						title: "标准版"
					},
					{
						url: require('@/assets/images/invite/5.png'),
						title: "建投版邀请卡"
					},
				]
			} else {
				this.banner = [{
						url: require('@/assets/images/invite/1.png'),
						title: "蓝色简约"
					},
					{
						url: require('@/assets/images/invite/2.png'),
						title: "限时抢购"
					},
					{
						url: require('@/assets/images/invite/3.png'),
						title: "看直播赢好礼"
					},
					{
						url: require('@/assets/images/invite/4.png'),
						title: "标准版"
					},
					{
						url: require('@/assets/images/invite/5.png'),
						title: "建投版邀请卡"
					},
				]
			}
			let {
				qaTab,
				roomInfo: {
					roomStatus,
					status,
					video,
					mode
				}
			} = this.roomInfo;
			if (mode === 2) { //竖屏模式2  封面图 上移 和视频保持统一
				this.videoCoverBoxClass = 'video-cover-box-second-mode';
			} else {
				this.videoCoverBoxClass = 'video-cover-box';
			}
			//开播提醒
			if (this.roomInfo.hasOwnProperty('isZbRemind')) {
				this.liveRemind = this.roomInfo.isZbRemind;
			}
			//存直播间url
			let backVideoUrl = window.location.href
			this.$lockr.set("PlayBackVideoUrl", backVideoUrl)
			fun.dotNum('live_particulars_page'); //打点
			if (this.roomInfo.tables.length) { //更多列表： 视频 图文 图文链接   分享榜
				let arr = []
				arr.push(...this.roomInfo.tables)
				let tabData = arr;
				if (tabData.findIndex(u => u.type == 1) != -1) {
					tabData.splice(tabData.findIndex(u => u.type == 1), 1) //删除 type=1 互动聊天
				}
				if (tabData.findIndex(m => m.type == 4) != -1) {
					tabData.splice(tabData.findIndex(m => m.type == 4), 1) //删除 type=4 分享榜
				}
				tabData.forEach(v => {
					switch (v.type) {
						case 2: // 视频
							v.strType = "liveTab";
							v.imgClass = "icon-bg2";
							v.component = "LookingBack"; //对应 组件
							break;
						case 3: // 图文
							v.strType = "liveTab";
							v.imgClass = "icon-bg3"
							v.component = "CurProduct"
							break;
						case 6: // 图文
							v.strType = "liveTab";
							v.imgClass = "icon-bg4"
							v.component = "CurProduct2"
							break;
						case 5: // 图文链接
							v.strType = "liveTab";
							v.imgClass = "icon-bg5"
							v.component = "HotProduct"
							break;
						default:
							break;
					}
				})
				qaTab.map((item) => {
					if (item.open) {
						let obj = {
							"strType": "InteractiveBtn",
							"type": item.qaType,
							"title": this.qaTypetoBetext[item.qaType],
							"creator": "",
							"content": "",
							"invitaCard": 0,
							"openMobile": 0,
							"diyImgUrl": "",
							"imgClass": "interactive-btn" + item.qaType,
							"component": "",
							"qaInfoId": item.qaInfoId,
						}
						tabData.push(obj)
					}
				})
				if (this.roomInfo.roomInfo.checkInSw == 1) { //报名 中奖信息
					let obj = {
						"strType": "InteractiveBtn",
						"type": 6,
						"title": this.roomInfo.roomInfo.checkInBtn || '报名',
						"creator": "",
						"content": "",
						"invitaCard": 0,
						"openMobile": 0,
						"diyImgUrl": "",
						"imgClass": "interactive-btn6",
						"component": "",
						"qaInfoId": "",
					}
					tabData.push(obj)
				}
				this.$store.state.roomTablesData = tabData;
			};
			if (!this.roomInfo.roomInfo.enterMessage && !this.roomInfo.roomInfo.giftOpen) {
				this.$store.state.clearDom.splice(1, 1, {
					'listShow': false, //清除特性按钮 隐藏
					'open': false
				})
			};
			if (this.$store.state.userInfo.un != undefined && this.$store.state.userInfo.un.length > 0) {
				this.un = this.$store.state.userInfo.un;
				this.nickname = this.$store.state.userInfo.nickname;
				this.wxpic = this.$store.state.userInfo.wxpic;
				this.getImInit(); //im初始化
				this.getCardER(); //邀请里面二维码
				this.invitationCardFun(this.wxpic);
			}
			if (roomStatus == 0) { //预告
				this.isPreviewPage = true;
			} else if (roomStatus == 1) { //直播
				this.isPlayBtn = true
				this.getVideoSrc(); //视频流
				this.$store.dispatch('setLiveIsStart', true);
			}
			let statusArrayNum = [0, 1, 4]; //-1 提交还没审核  0  审核通过 首页展示 1 已生效 2 已删除 3 提交审核中 4 已审核 5 驳回
			if (!statusArrayNum.includes(status)) { //提示审核
				this.isAudit = true;
			}
			this.setIntervalLiveRoom(); //房间定时器
			this.computeLeft = document.body.clientWidth * 215 / 375
			if (this.roomInfo.roomInfo.enterMessage) { //进入房间提示开启
				this.isEnterMessage = true
			} else {
				this.isEnterMessage = false
			}
			this.getShoppingData() //商品列表
			if (this.$store.state.SysOrgInfo.icon && this.$store.state.userInfo.un) { //机构图片和un
				this.wxRegister(this.wxRegCallback);
			}
			this.getRoomMember(this.roomId, this.roomInfo.roomInfo.sid, this.roomInfo.roomInfo.showStyle, (num) => {
				this.roomNum = num;
				if (this.roomInfo.roomInfo.showStyle == 0) {
					this.roomRealNum = num;
				}
			})
			if (this.roomInfo.roomInfo.maxNum && this.roomInfo.roomInfo.maxNum > 0 && this.roomInfo.roomInfo.showStyle !=
				0) {
				this.getRoomMember(this.roomId, this.roomInfo.roomInfo.sid, 0, (num) => {
					this.roomRealNum = num;
				})
			};
			//活动
			fun.getActivityData(1, this.roomId, (res) => {
				for (let i = 0; i < res.data.data.length; i++) {
					if (res.data.data[i].length != 0) {
						this.$set(this.isActivity, i, true); //数组，需要修改数组的第几个索引，要改的数据
					}
				}
				this.activityArray = res.data.data;
			});
			fun.getIsCollect(this.roomId, '2'); //是否收藏  1视频，2-房间
			//浮窗direction
			let channelArr = ['zxjt'];
			if (channelArr.includes(this.$channel)) {
				let modeArr = [0, 2];
				let {
					mode
				} = this.roomInfo.roomInfo; //0 横屏   其他竖屏
				if (mode == null) {
					mode = '0'
				}
				let direction = modeArr.includes(mode) ? '0' : '1';
				this.$store.dispatch('setFloatVideoDirection', direction);
			}
			//更多直播逻辑
			let sessionSto;
			if (window.sessionStorage.getItem('zxjt_liveList')) {
				sessionSto = JSON.parse(window.sessionStorage.getItem('zxjt_liveList'));
			}
			if (!sessionSto) {
				//请求直播列表
				this.getRoomList()
			} else {
				sessionSto.map((item, index, arr) => {
					if (item.roomId != this.roomId) {
						this.liveMoreArray.push(item)
					}
				})
				this.isLiveMore = this.liveMoreArray.length ? true : false;
			}
			// 是否为三方外链跳转
			if(!!window.sessionStorage.getItem('isJump')){
				this.isJump = !!window.sessionStorage.getItem('isJump')
				this.toJump = window.sessionStorage.getItem('toJump')
			}
		},
		mounted() {
			this.getQuickMessage(); //获取直播快捷栏消息；
			this.wordlimit(); //置顶留言字数限制
      this.getRoomCurrActivity()
			this.$store.dispatch("enterRoomTime", new Date().getTime()) //进入直播间的开始计时时间
			this.bgImagUrl = this.roomInfo.roomInfo.bgImagUrl //直播大背景图
      if(!this.bgImagUrl){
       this.bgImagUrl = this.sassRoomBg //直播大背景图
      }

			this.getRoomComment(); //留言
			const {
				roomInfo
			} = this.roomInfo;
			//弹框加定位 正中间
			let toastEle = document.getElementsByClassName('my-toast-ps')[0]
			if (toastEle) {
				toastEle.style.top = '50%'
			}
			// 清晰度调整面板控制
			this.$bus.$on('showRatioDialog', bool => {
				this.showRatioDialog = bool
			})
		},
		updated() {
			this.bs && this.bs.refresh() // 屏蔽消息情况下，刷新BScroll
		},
		destroyed() { //组件销毁时候调用
			clearInterval(this.liveRoomInterval); //关闭跑马灯 进入房间提示
			this.quitBigGroup(this.roomId);
			this.$store.dispatch("giftMessageQueue", []); //清空送礼列表
			this.$store.dispatch("getSocketConnected", false); //socket关闭
			this.$store.dispatch('setLiveIsStart', false)
			window.sessionStorage.setItem('zxjt_liveList', '')
			//弹框回到70%位置
			let myToastEle = document.getElementsByClassName('my-toast-ps')[0]
			if (myToastEle) {
				myToastEle.style.top = '70%'
			}
			const  { appVersionBoolean } =  this.$store.state;
			if(appVersionBoolean && window.terminal.isZxjtApp){//竖屏&& 版本大于 8.2.2
				this.$store.commit('setShowMarginTop',true);//设置头部
			}
		},
		activated() {

		},
		methods: {
      passSocketMsg(val) {
        if (val) {
          console.log(val, "socketMsg");
          if (val.type == "countdown") {
            this.getRoomCurrActivity();
          }
          this.activityIdDown = val.activityId;
          this.socketType = val.type;
        }
      },
      openToolPage(e) {
        const countdown = this.$refs.countdown;
        // 将倒计时的状态传递给子组件
        countdown.showDialog(this.countStatus);
      },
      // 获取倒计时抽奖相关信息
      getRoomCurrActivity() {
        let o = {
          rommId: this.roomId
        };
        this.$http
          .get("/lotto/countdown/getRoomCurrActivity?roomId=" + this.roomId)
          .then(
            //点击商品统计
            res => {
              if (res.data.code == "000000") {
                let data = res.data.data,
                  flag = false;
                if (data.showOpen == 1) {
                  flag = true;
                  if (data.activityId) {
                    // 倒计时处理
                    this.handleTime(data);
                  }
                } else {
                  flag = false;
                }
                this.isShowCountDown = flag;
                this.countStatus = data.state;
                this.activityIdDown = data.activityId;
                this.appId = data.appId;
                console.log(res, "0---", this.isShowCountDown);
              }
            },
            err => {}
          );
      },
      handleTime(data) {
        // 倒计时处理逻辑 handoutTime + countdownTimeLength - currTime
        let time = 0;
        // 年月日 转成毫秒
        let handoutTime = new Date(data.handoutTime.replace(/-/g, "/")).getTime();
        let countdownTimeLength = data.countdownTimeLength * 1000;
        let currTime = new Date(data.currTime.replace(/-/g, "/")).getTime();
        let countStatus = data.state;
        time = (handoutTime + countdownTimeLength - currTime) / 1000;
        console.log(handoutTime, countdownTimeLength, currTime, "---", time);
        if (time > 0) {
          this.time = time;
          this.countdownFun();
        } else {
          countStatus = 10;
          this.time = 0;
        }
        this.countStatus = countStatus;
      },
      // 倒计时
      countdownFun() {
        var minute = Math.floor(this.time / 60);
        var second = this.time % 60;
        minute < 10 ? (minute = "0" + minute) : "";
        second < 10 ? (second = "0" + second) : "";
        this.time = this.time - 1;
        this.countdown = minute + ":" + second;
        // 如果倒计时结束 清除计时器
        if (this.time < 0) {
          this.countdown = "00:00";
          this.countStatus = 10;
        } else {
          setTimeout(() => {
            this.countdownFun();
          }, 1000);
        }
      },


		clickVanOverlay() {
			if (this.isPopupCom == 'SmsVer') {

			} else {
				this.vantPopupShow = false;
				setTimeout(() => {
					this.isPopupCom = null
				}, 300)
			}
		},
			// 快捷消息点击事件
			clickmessage(item) {
         if (this.$store.state.isYk && window.terminal.isZxjtqhApp) {
                //游客
                  fun.ykDisposeFun();
                  return;
              }
				this.quickMessage = item;
			},
			getQuickMessage() {
				this.$http.get("/h5live/fastReply", ).then(res => {
					if (res.data.code == "000000") {
						this.quickMessageList = res.data.data;
					}
				}).catch(response => {
					console.log(response);
				});
			},
			roomVideoStartLive() { //socket开播
				if (!this.$store.state.liveIsStart) { //未开播
					this.$store.dispatch('setLiveIsStart', true)
					this.isPlayBtn = true;
					this.getVideoSrc(); //视频流;
					this.isPreviewPage = false;
					this.getMsmVerInit() //minxin里面方法
				}
			},
			invitationCardFun(txImg) {
				if (!this.$store.state.isYk) { //非游客
					if (txImg == null || txImg.includes('gd_mr')) { //游客容错
						this.txBase = require('@/assets/images/gd_mr.png')
					} else {
						this.getImgBase64(txImg, 'tx');
					};
					let {
						roomInfo: {
							imagUrl
						}
					} = this.roomInfo;
					//封面图 img
					this.getImgBase64(imagUrl, 'back');
				}
			},
			getRoomList() {
				this.$http.get(`/h5live/getRoomList?plat=${fun.getPlatform()}`).then(res => {
						if (res.data.code == "000000") {
							let {
								startRoomList
							} = res.data.data;
							startRoomList.map((item, index, arr) => {
								if (item.roomId != this.roomId) {
									this.liveMoreArray.push(item)
								}
							})
							this.isLiveMore = this.liveMoreArray.length ? true : false;
							window.sessionStorage.setItem('zxjt_liveList', JSON.stringify(res.data.data.startRoomList))
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			//时时点赞人数
			updateHdCount(hdNum) {
				if (hdNum) {
					if (hdNum > this.roomInfo.hdCount) {
						//vue 单项数据流只要更改 roomInfo里面的值
						this.roomInfo.hdCount = hdNum;
					}
				}
			},
			setFrontImg() { //处理前景图逻辑
				// frontImgType 前景图类型 0 无 1经典蓝 2中国红 3活力橙 4神秘紫 5松柏绿 99自定义 frontImg: 顶部前景  frontImgBottom: 底部前景
				//前景图处理
				switch (this.roomInfo.roomInfo.frontImgType) {
					case 0: //无
						break;
					case 1:
					case 2:
					case 3:
					case 4:
					case 5:
						this.isFrontImg = true;
						this.frontTopImg = require('@/assets/images/front-img/front' + this.roomInfo.roomInfo
							.frontImgType +
							'.png');
						this.frontBottomImg = require('@/assets/images/front-img/front' + this.roomInfo.roomInfo
							.frontImgType + this
							.roomInfo.roomInfo.frontImgType + '.png');
						break;
					case 99: //自定义
						this.isFrontImg = true;
						this.frontTopImg = this.roomInfo.roomInfo.frontImg;
						this.frontBottomImg = this.roomInfo.roomInfo.frontImgBottom;
						break;
					default:
						break;
				}
			},
			clickActivity(position) { //点击活动  position参数是点击的活动位置  //位置 0左上 1左下 2右上 3右下
				//左下角活动一个直接跳转  多个弹出
				if (position == 'leftBottom') {
					this.activeDataArray = this.activityArray[1];
					fun.activityDotNumFun(0, this.activityArray[1][0].id);
					window.sessionStorage.setItem('activityIconInfo', JSON.stringify(this.activityArray[1][0]))
					this.activeTitle = this.activityArray[1][0].name;
					this.$store.dispatch("globalMask", {
						isShow: true,
						bgColor: ''
					});
					this.showActionSheet = 'footerPop'
				}
				// else if (position == 'rightTop') {
				//         this.activeDataArray = this.activityArray[2];
				//         fun.activityDotNumFun(0, this.activityArray[2][0].id);
				//         window.sessionStorage.setItem('activityIconInfo', JSON.stringify(this.activityArray[2][0]))
				//         this.activeTitle = this.activityArray[2][0].name;
				//         this.$store.dispatch("globalMask", {
				//           isShow: true,
				//           bgColor: ''
				//         });
				//         this.showActionSheet = 'footerPop'
				//       }
			},
			rendScrollDom() {
				let _this = this;
				_this.scrollSwitch = false;
				_this.fenYePage++;
				_this.$http.get("/h5live/historyMessage?roomId=" + _this.roomId + "&id=" + _this.pageId + "&page=" + _this
					.fenYePage).then(
					res => {
						if (res.data.code == "000000") {
							let dataMsg = res.data.data.msg.items;
							//type 0是留言  1是点赞  2是红包  3是答题  4是问卷  5是投票 6 助理回复  7 送礼物
							// 如果后面第一页都是红包 页面讲不能滑动  待解决
							let messageHtml = '';
							const preEle = _this.$refs.msgContent.lastElementChild
							dataMsg.forEach(function(ele, index) {
								let li = document.createElement("li");
								li.className = 'message-box-li';
								if (ele.type == '1') {
									let span1 = document.createElement('span');
									span1.className = 'nick-name';
									span1.innerText = ele.nickName + " ：";
									let span2 = document.createElement('span');
									span2.className = 'message-text';
									let i = document.createElement('i');
									i.style.color = 'gold';
									i.innerText = `送出${ele.message}个赞`;
									span2.appendChild(i);
									li.appendChild(span1);
									if (ele.un == _this.currentUn) {
										li.className = 'message-box-li highlight-me';
										span1.className = 'nick-name nick-name-me';
										let spanMy = document.createElement("span");
										spanMy.className = "my-tip my-tip-im";
										spanMy.innerText = '我';
										let spanColon = document.createElement("span");
										spanColon.className = "comma";
										spanColon.innerText = " ：";
										span1.innerText = ele.nickName;
										li.appendChild(spanMy);
										li.appendChild(spanColon);
									}
									li.appendChild(span2);

								} else if (ele.type == '2') {
									li.style.display = 'none';
								} else if (ele.type == '3') {

								} else if (ele.type == '4') {

								} else if (ele.type == '5') {

								} else if (ele.type == '6') {
									// let img = document.createElement("img");
									// img.src = ele.avator && ele.avator!=null && ele.avator + '?x-oss-process=image/resize,m_fixed,h_70,w_70' || imgTx;
									// img.onerror = window.imgError;
									// li.appendChild(img);
									let officialBox = document.createElement('span');
									officialBox.className = "official-box";
									let officialSpan = document.createElement('span');
									officialSpan.className = 'official';
									if (_this.$channel == 'gdyh2') officialSpan.classList.add('officialGdyh2')
									officialSpan.innerHTML = "官方";
									let officialName = document.createElement('span');
									officialName.className = "official-name";
									officialName.innerHTML = ' ' + ele.nickName;
									officialBox.appendChild(officialSpan);
									officialBox.appendChild(officialName);
									li.appendChild(officialBox);

									let span1 = document.createElement("span");
									span1.className = "nick-name";
									span1.innerText = ' @' + JSON.parse(ele.message.replace(/\n/g, "\\n")
											.replace(/\r/g, "\\r"))
										.parent.nickName + " ：";
									li.appendChild(span1);
									let span2 = document.createElement("span");
									span2.className = "message-text";
									span2.innerText = JSON.parse(ele.message.replace(/\n/g, "\\n").replace(
										/\r/g, "\\r")).msg;
									li.appendChild(span2);

									let replaiedBox = document.createElement('div');
									replaiedBox.className = "replaied-box"
									let p = document.createElement('p');
									let replaiedName = document.createElement('span');
									replaiedName.innerHTML = JSON.parse(ele.message.replace(/\n/g, "\\n")
											.replace(/\r/g, "\\r"))
										.parent.nickName + " ：";
									let replaiedInfo = document.createElement('span');
									replaiedInfo.innerHTML = JSON.parse(ele.message.replace(/\n/g, "\\n")
											.replace(/\r/g, "\\r"))
										.parent.message;
									p.appendChild(replaiedName);
									p.appendChild(replaiedInfo);
									replaiedBox.appendChild(p);
									li.appendChild(replaiedBox);
								} else if (ele.type == '7') {
									let span1 = document.createElement('span');
									span1.className = 'nick-name';
									span1.innerText = ele.nickName + " ：";
									let span2 = document.createElement('span');
									span2.className = 'message-text';
									let i = document.createElement('i');
									i.style.color = '#eb5a6a';
									i.innerText = ele.message;
									span2.appendChild(i);
									li.appendChild(span1);
									if (ele.un == _this.currentUn) {
										li.className = 'message-box-li highlight-me';
										span1.className = 'nick-name nick-name-me';
										let spanMy = document.createElement("span");
										spanMy.className = "my-tip my-tip-im";
										spanMy.innerText = '我';
										let spanColon = document.createElement("span");
										spanColon.className = "comma";
										spanColon.innerText = " ：";
										span1.innerText = ele.nickName;
										li.appendChild(spanMy);
										li.appendChild(spanColon);
									}
									li.appendChild(span2);
								} else if (ele.type == '0') {
									//主播消息
									//										    <li class="message-box-li">
									//										        <img src="https://saas-sj.oss-cn-shenzhen.aliyuncs.com/head.png">
									//											    <span class="official-box">
									//											         <span class="official">官方</span>
									//											    </span>
									//                                                <span class="nick-name"> 主播小助手：</span>
									//											    <span class="message-text">我是主播111</span>
									//										    </li>

									//                                        普通消息
									//										 <li class="message-box-li">
									//						                    <img src="../../../assets/images/coin-live.png"/>
									//											<span class="nick-name">臭豆腐西施：</span>
									//											<span class="message-text">这主播的内容还挺受用的这主播的内容还挺受用的还挺受用的还挺受用的还挺受用的</span>
									//										 </li>
									if ((ele.un != null && (ele.un.includes('zbzlpt') || ele.un == _this.roomInfo.roomInfo.anchor))) { //小助手 obs主播发言ele.un == this.roomInfo.roomInfo.anchor
										// let img = document.createElement("img");
										// img.src = ele.avator && ele.avator!=null && ele.avator + '?x-oss-process=image/resize,m_fixed,h_70,w_70' || imgTx;
										// img.onerror = window.imgError;
										// li.appendChild(img);
										let officialBox = document.createElement('span');
										officialBox.className = "official-box";
										let officialSpan = document.createElement('span');
										officialSpan.className = 'official';
										if (_this.$channel === 'gdyh2') officialSpan.classList.add(
											'officialGdyh2')
										officialSpan.innerHTML = "官方";
										officialBox.appendChild(officialSpan);
										li.appendChild(officialBox);
										let span1 = document.createElement("span");
										span1.className = "nick-name";
										span1.innerText = ele.un == _this.roomInfo.roomInfo.anchor?'主播':ele.nickName;
										li.appendChild(span1);
										let span2 = document.createElement("span");
										span2.className = "message-text";
										span2.innerText = ele.message;
										li.appendChild(span2);
									} else { //普通消息
										// let img = document.createElement("img");
										// img.src = ele.avator && ele.avator!=null && ele.avator + '?x-oss-process=image/resize,m_fixed,h_70,w_70' || imgTx;
										// img.onerror = window.imgError;
										// li.appendChild(img);
										let span1 = document.createElement("span");
										span1.className = "nick-name";
										span1.innerText = ele.nickName + " ：";
										li.appendChild(span1);
										let span2 = document.createElement("span");
										span2.className = "message-text";
										span2.innerText = fun.searchIphoneNum(ele.message);
										if (ele.un == _this.currentUn) {
											li.className = 'message-box-li highlight-me';
											span1.className = 'nick-name nick-name-me';
											let spanMy = document.createElement("span");
											spanMy.className = "my-tip my-tip-im";
											spanMy.innerText = '我';
											let spanColon = document.createElement("span");
											spanColon.className = "comma";
											spanColon.innerText = " ：";
											span1.innerText = ele.nickName;
											li.appendChild(spanMy);
											li.appendChild(spanColon);
										}
										li.appendChild(span2);
									}
								}
								_this.$refs.msgContent.insertBefore(
									li,
									_this.$refs.msgContent.childNodes[_this.$refs.msgContent.childNodes
										.length + 1]
								);
							});
							_this.scrollSwitch = true;
							_this.$nextTick(() => {
								_this.bs.refresh()
								_this.bs.scrollToElement(preEle, 0)
							})
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			getCardER() { //邀请里面二维码
				let ERcode = fun.getCurPageUrl("live", this.roomId)
				this.$lockr.set("ERcode", ERcode)
			},
			socketCallBack() { //分享统计
				let _this = this
				if (_this.$route.query.fromUn != undefined) {
					setTimeout(() => {
						let params = {
							'fromUn': _this.$route.query.fromUn,
							'anchor': _this.roomInfo.roomInfo.anchor,
							'roomId': _this.roomId
						};
						_this.$http.post("/h5live/shareCount", _this.$qs.stringify(params)).then(
							res => {
								if (res.data.code == "000000") {
									console.log("share invite data", res.data.data)
								} else {
									console.log("server data err")
								}
							},
							err => {
								console.log(err);
							}
						);
					}, 368)
				}
			},
			//红包
			hongbaostartruan(data) {
				if (this.$store.state.isYk) {
					return
				}
				this.redPacketData = data;
				if (!this.$store.state.isYk) {
					this.renderCom++;
					this.enterType = 'redPopup';
					this.isRedPacketCom = true;
				}
			},
			appendLoveMsg(loveObj) { //socket 点赞消息
				let _this = this;
				if (_this.$refs.msgContent.children.length > 100) {
					let liSum = _this.$refs.msgContent.children;
					_this.$refs.msgContent.removeChild(liSum[_this.$refs.msgContent.children.length - 1]);
				}
				let li = document.createElement("li");
				li.className = 'message-box-li';
				let span1 = document.createElement('span');
				span1.className = 'nick-name';
				span1.innerText = loveObj.nick || loveObj.un + " ：";
				span1.style.marginRight = '4px';
				li.appendChild(span1);
				if (loveObj.un == this.currentUn) {
					li.className = 'message-box-li highlight-me';
					span1.className = 'nick-name nick-name-me';
					let spanMy = document.createElement("span");
					spanMy.className = "my-tip";
					spanMy.innerText = '我';
					li.appendChild(spanMy);
				}
				let spanColon = document.createElement("span");
				spanColon.className = "comma";
				spanColon.innerText = "：";
				li.appendChild(spanColon);
				let span2 = document.createElement('span');
				span2.className = 'message-text';
				let i = document.createElement('i');
				i.style.color = 'gold';
				i.innerText = `送出${loveObj.num}个赞`;
				span2.appendChild(i);
				li.appendChild(span2);
				_this.$refs.msgContent.insertBefore(
					li,
					_this.$refs.msgContent.childNodes[0]
				);
				_this.newIMJumpButtom() // 新消息跳转底部
			},
			appendGiftMsg(giftObj) { //socket 送礼时时消息
				let _this = this;
				let li = document.createElement("li");
				li.className = 'message-box-li';
				let span1 = document.createElement('span');
				span1.className = 'nick-name';
				span1.innerText = giftObj.nick || giftObj.un + " ：";
				span1.style.marginRight = '4px';
				li.appendChild(span1);
				if (giftObj.un == this.currentUn) {
					li.className = 'message-box-li highlight-me';
					span1.className = 'nick-name nick-name-me';
					let spanMy = document.createElement("span");
					spanMy.className = "my-tip";
					spanMy.innerText = '我';
					li.appendChild(spanMy);
				}
				let spanColon = document.createElement("span");
				spanColon.className = "comma";
				spanColon.innerText = "：";
				li.appendChild(spanColon);
				let span2 = document.createElement('span');
				span2.className = 'message-text';
				let i = document.createElement('i');
				i.style.color = 'rgb(235, 90, 106)';
				i.innerText = giftObj.data;
				span2.appendChild(i);
				li.appendChild(span2);
				_this.$refs.msgContent.insertBefore(
					li,
					_this.$refs.msgContent.childNodes[0]
				);
				_this.newIMJumpButtom() // 新消息跳转底部
			},
			updateMember(num) { //socket人数
				if (num) {
					if (!(this.roomInfo.roomInfo.showStyle != 0 && this.roomNum && this.roomNum > num)) {
						this.roomNum = num;
					}
				}
			},
			getRoomMember(roomId, sid, showStyle, cb) {
				let _this = this
				this.$http.get("/h5live/getRoomMember?roomId=" + roomId + "&sid=" + sid + "&showStyle=" + showStyle).then(
					res => {
						if (res.data.code == "000000") {
							cb(res.data.data)
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			wxRegCallback() { //分享
				const {shareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};//机构分享
				const {name,icon} = this.$store.state.SysOrgInfo || {};
				const {roomInfo:{intro,title,shareTitel:roomShareTitel,shareSubtitle:roomShareSubtitl,shareImgurl:roomShareImgurl,sid,anchor}} = this.roomInfo;
				let opstion = {
					link: fun.getCurPageUrl('live', this.roomId),
					//直播间分享标题>直播主题>机构默认分享主题>默认值
					title: roomShareTitel || title || shareTitle || '【' + name + '】一起来看直播吧！' , // 分享标题
					desc: roomShareSubtitl|| intro || shareDesc || "精彩直播，尽在" + name + "手机直播！", //分享描述
					imgUrl: roomShareImgurl || shareIcon || icon, //分享的图片
					success: function() {
						let params = {
							'roomId': this.roomId,
							'sceneId': sid,
							'anchor': anchor,
							'url': window.location.origin + '/#' + this.$route.path
						};
						this.$http.post('/h5live/shareStatic', this.$qs.stringify(params)).then(
							res => {},
							err => {
								console.log(err)
							}
						)
					},
					error: function(e) {

					}
				};
				this.ShareTimeline(opstion);
			},
			quitBigGroup(avChatRoomId) {
				let options = {
					'GroupId': avChatRoomId //群id
				};
				webim.quitBigGroup(
					options,
					function(resp) {
						webim.logout()
						console.log("退群成功")
					},
					function(err) {
						console.log("退群fail", err.ErrorInfo);
					}
				);
			},
			//进入房间信息提示回调
			enterRoomPersonTip(nick) { //参数昵称
				if (this.isEnterMessage) { //true 是进入房间开启提示  false是不提示
					if (this.$store.state.userInfo.nickname != nick) { //当前账号不是自己 push到数组里面
						this.marqueeTipUnArray.push(nick);
					}
				}
			},
			//自定义小助理消息
			heaperMessage(ele) {
				let li = document.createElement("li");
				li.className = "message-box-li";
				// let img = document.createElement("img");
				// img.src = ele.fromAccountHeadurl && ele.fromAccountHeadurl != null && ele.fromAccountHeadurl +
				// 	'?x-oss-process=image/resize,m_fixed,h_236,w_750' || imgError;
				// img.onerror = window.imgError;
				// li.appendChild(img);
				let officialBox = document.createElement('span');
				officialBox.className = "official-box";
				let officialSpan = document.createElement('span');
				officialSpan.className = 'official';
				if (this.$channel === 'gdyh2') officialSpan.classList.add('officialGdyh2')
				officialSpan.innerHTML = "官方";
				officialBox.appendChild(officialSpan);
				li.appendChild(officialBox);
				let span1 = document.createElement("span");
				span1.className = "nick-name";
				span1.innerText = ' ' + ele.fromAccountNick + '：';
				let span2 = document.createElement("span");
				span2.className = "message-text";
				span2.innerText = JSON.parse(ele.elems[0].content.data).content
				li.appendChild(span1);
				li.appendChild(span2);
				this.$refs.msgContent.insertBefore(
					li,
					this.$refs.msgContent.childNodes[0]
				);
				this.newIMJumpButtom() // 新消息跳转底部
			},
			//小助手回复消息
			replyMessage(ele) { //dom 结构见md文件
				let li = document.createElement("li");
				li.className = "message-box-li";
				// let img = document.createElement("img");
				// img.src = ele.avator && ele.avator!=null && ele.avator + '?x-oss-process=image/resize,m_fixed,h_70,w_70' || imgTx;
				// img.onerror = window.imgError;
				// li.appendChild(img);
				let officialBox = document.createElement('span');
				officialBox.className = "official-box";
				let officialSpan = document.createElement('span');
				officialSpan.className = 'official';
				if (this.$channel === 'gdyh2') officialSpan.classList.add('officialGdyh2')
				officialSpan.innerHTML = "官方";
				officialBox.appendChild(officialSpan);
				li.appendChild(officialBox);
				let officialName = document.createElement('span');
				officialName.className = "official-name";
				officialName.innerHTML = ' ' + ele.nickName;
				officialBox.appendChild(officialName);
				li.appendChild(officialBox);
				let span1 = document.createElement("span");
				span1.className = "nick-name";
				span1.innerText = ' @' + ele.parent.nickName + ': ';
				let span2 = document.createElement("span");
				span2.className = "message-text";
				span2.innerText = ele.message;
				li.appendChild(span1);
				li.appendChild(span2);
				let replaiedBox = document.createElement('div');
				replaiedBox.className = "replaied-box"
				let p = document.createElement('p');
				let replaiedName = document.createElement('span');
				replaiedName.innerHTML = ele.parent.nickName + ': ';
				let replaiedInfo = document.createElement('span');
				replaiedInfo.innerHTML = ele.parent.message
				p.appendChild(replaiedName);
				p.appendChild(replaiedInfo);
				replaiedBox.appendChild(p);
				li.appendChild(replaiedBox);
				this.$refs.msgContent.insertBefore(
					li,
					this.$refs.msgContent.childNodes[0]
				);
				this.newIMJumpButtom() // 新消息跳转底部
			},
			// 留言im
			getMessage(msg) {
				let subType = msg.getSubType();
				let text = "";
				let HDhtml = "";
				let typeNum = ''
				//console.log("subType is",subType,msg)
				switch (subType) {
					case webim.GROUP_MSG_SUB_TYPE.COMMON: // 群普通消息
						text = this.convertMsgtoHtml(msg);
						//						if(text===this.$channel+'ANSWER'){//typeNum == 3  答题
						//							typeNum = 3;
						//							HDhtml =' <div class="HDClass1">提交了答题~ <div class="HDimg classDT"></div></div>'
						//						}
						//						if(text===this.$channel+'QUESTION'){//typeNum == 4  问卷
						//							typeNum = 4;
						//							HDhtml =' <div class="HDClass1">提交了问卷~ <div class="HDimg classWJ"></div></div>'
						//						}
						//						if(text===this.$channel+'VOTE'){//typeNum == 5 投票
						//							typeNum = 5;
						//							HDhtml =' <div class="HDClass1">已投票成功~ <div class="HDimg classTP"></div></div>'
						//						}

						//						if(trim(text).length == '11') {
						//							if((/^1[3456789]\d{9}$/.test(trim(text)))) { //是手机号码
						//								text = trim(text).substring(0, 3) + "****" + trim(text).substring(7, 11);
						//							}
						//						}
						if (text === 'gift') { //typeNum === 6 礼物消息
							typeNum = 6;
						}
						break;
					case webim.GROUP_MSG_SUB_TYPE.REDPACKET: // 群红包消息
						text = "[群红包消息]" + this.convertMsgtoHtml(msg);
						break;
					case webim.GROUP_MSG_SUB_TYPE.LOVEMSG: // 群点赞消息
						// 业务自己可以增加逻辑，比如展示点赞动画效果
						//text = '[群点赞消息]' + this.convertMsgtoHtml(msg)
						// this.isShow();
						// 展示点赞动画
						// showLoveMsgAnimation();
						break;
					case webim.GROUP_MSG_SUB_TYPE.TIP: // 群提示消息
						text = ''
						this.convertMsgtoHtml(msg)
						break;
					default:
						text = msg.tipText;
						break;
				}

				if (text != "") {

					// this.imTextMsg = {
					//      "addTime": "",
					//      "anchor": this.roomInfo.roomInfo.anchor,
					//      "avator": "",
					//      "channel": this.roomInfo.roomInfo.channel,
					//      "id": null,
					//      "message": text,
					//      "nickName": "kkk",
					//      "roomId": this.roomId,
					//      "sceneId": this.roomInfo.roomInfo.sid,
					//      "type": 0,
					//      "un": msg.fromAccount,
					//      "vType": null
					// }
					// console.log(this.imTextMsg)
					let _this = this
					if (_this.$refs.msgContent.children.length > 100) {
						let liSum = _this.$refs.msgContent.children;
						_this.$refs.msgContent.removeChild(liSum[_this.$refs.msgContent.children.length - 1]);
					}

					//                     要渲染的DOM结构
					//                  <li class="message-box-li">
					//						<img src="../../../assets/images/coin-live.png"/>
					//						<span class="nick-name">臭豆腐西施：</span>
					//						<span class="message-text">这主播的内容还挺受用的这主播的内容还挺受用的还挺受用的还挺受用的还挺受用的</span>
					//					</li>

					let liItem = document.createElement("li");
					liItem.className = "message-box-li";
          if(msg.fromAccount == _this.roomInfo.roomInfo.anchor) { //obs主播发言  消息里的账号和直播间账号
              let officialBox = document.createElement('span');
              officialBox.className = "official-box";
              let officialSpan = document.createElement('span');
              officialSpan.className = 'official';
              officialSpan.innerHTML = "官方";
              officialBox.appendChild(officialSpan);
              liItem.appendChild(officialBox);
					}
					let span1 = document.createElement("span");
					span1.className = 'nick-name';
					span1.innerText = msg.fromAccount == _this.roomInfo.roomInfo.anchor ?'主播' : msg.getFromAccountNick();
					let spanColon = document.createElement("span");
					spanColon.className = "comma";
					spanColon.innerText = " ：";
					liItem.appendChild(span1);
					liItem.appendChild(spanColon);
					let span2 = document.createElement("span");
					span2.className = 'message-text';
					span2.innerText = fun.searchIphoneNum(text);
					if (msg.fromAccount == _this.currentUn) {
						liItem.className = 'message-box-li highlight-me';
						span1.className = 'nick-name nick-name-me';
						let spanMy = document.createElement("span");
						spanMy.className = "my-tip  my-tip-im";
						spanMy.innerText = '我';
						liItem.insertBefore(spanMy, spanColon)
					}
					liItem.appendChild(span2);
					_this.$refs.msgContent.insertBefore(
						liItem,
						_this.$refs.msgContent.childNodes[0]
					);
					_this.newIMJumpButtom() // 新消息跳转底部
				}
			},
			getImInit() {
				let _this = this
				_this.$http.get("/h5live/getUserSix").then(
					res => {
						if (res.data.code == "000000") {
							_this.iniIm(
								_this.roomInfo.sdkId,
								_this.roomInfo.acType,
								_this.roomId,
								_this.$store.state.userInfo.un,
								_this.$store.state.userInfo.nickname,
								_this.$store.state.userInfo.wxpic,
								res.data.data,
								() => {
									_this.initWebSocket('/liveSocket/liveRoom?token=' + _this.$token + '&plat=' +
										fun.getPlatform() +
										'&roomId=' + _this.roomId + '&channel=' + _this.$channel + '&source=' +
										_this.$source);
								}
							);
						}
					},
					err => {}
				);
			},
			hideGiftPanelHandle() {
				// 关闭送礼面板，数量归一
				this.$store.dispatch("showGiftPanelFlag", false)
				//console.log("关闭")
				this.$store.dispatch("showSendMask", false)
				this.$store.dispatch("giftAmount", 1)
			},
			async	getShoppingData(comeFrom) {
				try {
					// let plat = this.$store.state.axiosPlat;
					// if(!plat){
					// 	 await fun.initAxiosPlatform()
					// }
				const msgData = await shoppingInfo(this.roomId,'0');
				const { code } = msgData.data;
				if(code === '000000'){
					const {data,data:{goods:{goodsList}}} = msgData.data;
                    this.shoppingDataInfo = data;
                    if(goodsList.length){
						for (let i = 0; i < goodsList.length; i++) {
							if (goodsList[i].enIntro == "1") {
								this.appendExpGoods(goodsList[i])
							}
						}
						if(comeFrom === 'rightBtnFrom'){
							this.popupObj = {
								'position': 'bottom',
								'width': this.$store.state.isMobile ? '100%' : '400px',
								'height': 'auto',
								'isOverlay': true,
								'round': true,
								'isPopupGlobalMask': true,
							},
							this.isPopupCom = 'OrderList';
							this.vantPopupShow = true;
						}
					}
				}

			} catch (error) {
				console.log(error);
			}
				return
				this.$http.get('/h5live/getRoomGoodsAndTitle?mixId=' + this.roomId + '&type=0').then((
					res) => { //mixId 房间id或回看id   type 0-直播间,1-回看
					if (res.data.code == '000000') {
						if (res.data.data.goods.length) {
							if (window.terminal.weixin) {
								let num = 0;
								let shoppingArray = [];
								for (let i = 0; i < res.data.data.goods.length; i++) {
									if (res.data.data.goods[i].goodsTarget == "1") { // 0 app  1 微信
										shoppingArray.push(res.data.data.goods[i])
										num++;
										if (res.data.data.goods[i].isDefault == "1") {
											this.appendExpGoods(res.data.data.goods[i])
										}
									}
								}
								if (num) {
									this.isShoppingShow = true;
									this.shoppingNum = num;
									this.shoppingDataInfo = {
										'num': num,
										'shoppingArray': shoppingArray
									}
								}
							} else { //app
								let num = 0;
								let shoppingArray = [];
								for (let i = 0; i < res.data.data.goods.length; i++) {
									if (res.data.data.goods[i].goodsTarget == "0") { // 0 app  1 微信
										shoppingArray.push(res.data.data.goods[i])
										num++;
									}
									if (res.data.data.goods[i].isDefault == "1") {
										this.appendExpGoods(res.data.data.goods[i])
									}
								}
								if (num) {
									this.isShoppingShow = true;
									this.shoppingNum = num;
									this.shoppingDataInfo = {
										'num': num,
										'shoppingArray': shoppingArray
									}
								}
							}
						}
					}
				}, (err) => {

				})
			},
			getLotterySocketMsg(msg) { //抽奖socket消息  点击开始抽判断游客状态
				this.startLotteryObj = {
					"activityId": msg.activityId,
					"roomId": this.roomId,
					"finish": null,
					"drawRange": null
				};
				this.lotteryNum++;
				this.isTurntable = true;
			},
			getLotteryById() {
				this.$http.get("/lotto/getCurrActIdByRoomId?roomId=" + this.roomId).then(res => {
						if (res.data.code == "000000") {
							if (res.data.data.finish == '1') { //1 未开始 7 正在进行 10 已经结束
								fun.toastMessage('抽奖还未开始，请耐心等待~');
							} else if (res.data.data.finish == '10') {
								fun.toastMessage('抽奖已结束~');
							} else {
								this.startLotteryObj = res.data.data;
								this.isTurntable = true;
							}

						} else {
							console.log('获取抽奖活动id报错')
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			getLivePrizeList() {
				this.$http.get("/lotto/userLottoTickets?page=1&pageSize=20&roomId=" + this.roomId).then(
					res => {
						//console.log(res.data.data)
						if (res.data.code == "000000") {
							this.liveWinArray = res.data.data;
							this.$store.dispatch("globalMask", {
								isShow: true,
								bgColor: ''
							});
							this.showActionSheet = 'LiveMinePrizeList';
						} else {
							console.log('我的直播间奖品列表返回error', res.data)
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			// 本地将url转成base64格式
			getImgBase64(url, source) {
				window.fun.getBase64(url, source,(res) =>{
					if (source === "back") {
						this.postImg = res; // 将结果赋值给需要用的变量属性
					}  else {
						this.txBase = res;
					}
				})
			},
			getInviteBgList() {
				this.$http.get('/h5live/getShardingImg?roomId=' + this.roomId).then((res) => {
					let {
						code,
						data
					} = res.data
					if (code == '000000') {
						if(data.length && data.length == '1'){
							let canvasBox = document.getElementById('canvasBox')
							let canvas = document.createElement('canvas')
							//    canvas.width = 646;
							//    canvas.height = 992;
							   canvasBox.appendChild(canvas);
							   this.drawImg(data[0].title,data)
							   canvas.style.display = 'none';
						}else{
						   console.log('app邀请卡接口返回错误')
						}
					}
				}, (err) => {
					console.log(err);
				})
			},
			//app 邀请卡//根据title 画图
			drawImg(title,dataArray) {
				let erCode = this.$lockr.get("ERcode")
				this.imgBase64ERcode = jrQrcode.getQrBase64(erCode, {
					correctLevel: QRErrorCorrectLevel.L,
				}); //base64格式二维码
				return new Promise((resolve, reject) => {
					switch (title) {
						case '蓝色简约': //绘制第一张
							let c = document.getElementById("canvasBox");
							let ctx = c.getContext("2d");
							const bg = new Image();
							bg.src = this.banner[0].url;
							bg.onload = () => {
								c.width = 646*2;
								c.height = 992*2;
								ctx.drawImage(bg, 0, 0, 646*2, 992*2);
								const TXImg = new Image();
								TXImg.src = this.txBase;
								TXImg.onload = () => {
									fun.circleImg(ctx, TXImg, 270*2, 134*2, 106);
									// ctx.drawImage(TXImg, c.width/2 - 51, 173, 104, 104); //起始   +大小
									ctx.fillStyle = "#FFFFFF"; //昵称
									ctx.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
									ctx.textAlign = "center";
									ctx.fillText(this.nickname, 323*2,290*2);
									const SCImg = new Image(); //直播主题图片
									SCImg.src = this.postImg;
									SCImg.onload = () => {
										ctx.drawImage(SCImg, 75*2, 367*2, 496*2, 280*2); //起始   +大小
												//绘制二维码
												const ERImg = new Image();
												ERImg.src = this.imgBase64ERcode;
												ERImg.onload = () => {
													ctx.drawImage(ERImg, 397*2, 696*2, 172*2,172*2);
													fun.dealImage(c.toDataURL("image/png"),
														this.reduceVal, (res) => {
															//this.canvasImg = res
															this.postAppShare(res);
															c.style.display = 'none';
														})
												}
									}
								}
							}
							break;
						case '限时抢购': //绘制第二张
							let c1 = document.getElementById("canvasBox");
							let ctx1 = c1.getContext("2d");
							const bg1 = new Image();
							bg1.src = this.banner[1].url;
							bg1.onload = () => {
								c1.width = 646*2;
								c1.height = 996*2;
								ctx1.drawImage(bg1, 0, 0, 646*2, 996*2);
								const TXImg = new Image();
								TXImg.src = this.txBase;
								TXImg.onload = () => {
									fun.circleImg(ctx1, TXImg, 273*2, 197*2, 99);
									// ctx1.drawImage(TXImg, c1.width/2 - 51, 230, 104, 104); //起始   +大小
									ctx1.fillStyle = "#FFFFFF"; //昵称
									ctx1.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
									ctx1.textAlign = "center";
									ctx1.fillText(this.nickname, 323*2,338*2);
									const SCImg = new Image(); //直播主题图片
									SCImg.src = this.postImg;
									SCImg.onload = () => {
										ctx1.drawImage(SCImg, 75*2, 425*2, 496*2, 280*2); //起始   +大小
												//绘制二维码
												const ERImg = new Image();
												ERImg.src = this.imgBase64ERcode;
												ERImg.onload = () => {
													ctx1.drawImage(ERImg,  397*2, 752*2, 172*2,172*2);
													fun.dealImage(c1.toDataURL(
															"image/png"), this
														.reduceVal, (
															res) => {
															//this.canvasImg = res
															this.postAppShare(res);
															c1.style.display = 'none'
														})
												}
									}
								}
							}
							break;
						case '看直播赢好礼': // 绘制第三张
							let c2 = document.getElementById("canvasBox");
							let ctx2 = c2.getContext("2d");
							const bg2 = new Image();
							bg2.src = this.banner[2].url;
							bg2.onload = () => {
								c2.width = 646*2;
								c2.height = 996*2;
								ctx2.drawImage(bg2, 0, 0, 646*2, 996*2);
								const TXImg = new Image();
								TXImg.src = this.txBase;
								TXImg.onload = () => {
									fun.circleImg(ctx2, TXImg, 82*2, 228*2, 99);
									// ctx2.drawImage(TXImg, 74, 324, 82, 82); //起始   +大小
									ctx2.fillStyle = "#FFFFFF"; //昵称
									ctx2.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
									ctx2.textAlign = "left";
									ctx2.fillText(this.nickname, 213*2, 260*2);
									const SCImg = new Image(); //直播主题图片
									SCImg.src = this.postImg;
									SCImg.onload = () => {
										ctx2.drawImage(SCImg, 75*2, 367*2, 496*2, 280*2); //起始   +大小
												//绘制二维码
												const ERImg = new Image();
												ERImg.src = this.imgBase64ERcode;
												ERImg.onload = () => {
													ctx2.drawImage(ERImg, 397*2, 695*2, 172*2,172*2);
													fun.dealImage(c2.toDataURL(
															"image/png"), this
														.reduceVal, (
															res) => {
																//this.canvasImg = res
															this.postAppShare(res);
															c2.style.display = 'none';
														})

												}
									}
								}

							}
							break;
						case '标准版': // 绘制第四张
							let c3 = document.getElementById("canvasBox");
							let ctx3 = c3.getContext("2d");
							const bg3 = new Image();
							bg3.src = this.banner[3].url;
							bg3.onload = () => {
								c3.width = 646*2;
								c3.height = 996*2;
								ctx3.drawImage(bg3, 0, 0, 646*2, 996*2);
								const TXImg = new Image();
								TXImg.src = this.txBase;
								TXImg.onload = () => {
									fun.circleImg(ctx3, TXImg, 58*2, 193*2, 116);
									// ctx3.drawImage(TXImg, 30, 134, 116, 116); //起始   +大小
									ctx3.fillStyle = "#000000"; //昵称
									ctx3.font = "normal small-caps 500 72px Microsoft Yahei In-Bold Font";
									ctx3.textAlign = "left";
									ctx3.fillText(this.nickname, 207*2, 233*2);
									const SCImg = new Image(); //直播主题图片
									SCImg.src = this.postImg;
									SCImg.onload = () => {
										ctx3.drawImage(SCImg, 55*2, 352*2, 539*2, 305*2); //起始   +大小
											//绘制二维码
											const ERImg = new Image();
											ERImg.src = this.imgBase64ERcode;
											ERImg.onload = () => {
												ctx3.drawImage(ERImg, 422*2, 723*2, 172*2,172*2);
												fun.dealImage(c3.toDataURL("image/png"), this
													.reduceVal, (res) => {
														//this.canvasImg = res
														this.postAppShare(res);
														c3.style.display = 'none'
													})

											}
									}
								}
							}
							break;
						case '建投版邀请卡': // 绘制第五张
						let c31 = document.getElementById("canvasBox");
							let ctx31 = c31.getContext("2d");
							const bg31 = new Image();
							bg31.src = this.banner[4].url;
							bg31.onload = () => {
								c31.width = 646*2;
								c31.height = 992*2;
								ctx31.drawImage(bg31, 0, 0, 646*2, 992*2);
								//fun.drawRoundRect(ctx31,40,0,0,595*2, 785*2,bg31)
									const SCImg = new Image(); //直播主题图片
									SCImg.src = this.postImg;
									SCImg.onload = () => {
										const {name,icon} = this.$store.state.SysOrgInfo || {};
										const  curUrl = window.location.href;
										let shareTitleCur;
										let shareSubTitleCur;
										if(curUrl.includes('liveRoom')){//直播间
											const {shareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};//机构分享
											const {intro,title,shareTitel:roomShareTitel,shareSubtitle:roomShareSubtitl,shareImgurl:roomShareImgurl} = this.roomInfo.roomInfo;
											shareTitleCur =  roomShareTitel || title || shareTitle ||` 【 ${name} 】一起来看直播吧！`  // 分享标题
											shareSubTitleCur =  roomShareSubtitl||  shareDesc ||  `精彩直播,尽在 ${name}手机直播！`  //分享描述
										}else{//回看
											const { shareTitle: orgShareTitle, shareDesc, shareIcon } = this.$store.state.orgShareObj || {};//机构分享
											const  { shareTitle, shareSubtitle, shareImgurl, subTitle, title }  = this.videoInfo.videoInfo;
											shareTitleCur = shareTitle || title || orgShareTitle || `【 ${name } 】精彩视频`; //分享标题
											shareSubTitleCur = shareSubtitle || shareDesc || `精彩视频,尽在${name}手机直播！`; //分享描述
										}
										fun.drawRoundRectTopRightLeft(ctx31,20*2,0,0,646*2, 365*2,SCImg);
											//绘制title
											ctx31.fillStyle = "#000000";
											ctx31.font = "80px Arial";
											ctx31.fillText(shareTitleCur.length > 14 ? shareTitleCur.slice(0,14)+'...' : shareTitleCur, 30*2, 435*2);
											//绘制副标题
											ctx31.fillStyle = "#222630";
											ctx31.font = "52px Arial";
											//ctx31.fillText(shareSubTitleCur.length > 20 ? shareSubTitleCur.slice(0,18) +'...' : shareSubTitleCur, 30*2, 500*2);
											fun.textPrewrap(ctx31,shareSubTitleCur,30*2, 500*2,40*2,550*2,2);
											if(curUrl.includes('liveRoom')){
												//绘制时间
												ctx31.fillStyle = "#FF5A00";
												ctx31.font = "80px Arial";
												const time = dayjs(this.roomInfo.roomInfo.beginTime).format("MM月DD日 HH:mm");
												ctx31.fillText(time, 30*2, 675*2);
												//绘制开播时间
												ctx31.fillStyle = "#ff5a00";
												ctx31.font = "48px Arial";
												ctx31.fillText('开播时间', 42*2, 598*2);
												//绘制圆角矩形
												ctx31.lineWidth = 2;//边框为14px
												ctx31.strokeStyle = '#ff5a00';
												ctx31.beginPath();
												ctx31.roundRect(30*2, 570*2, 120*2, 40*2, 20);//x,y width height  rad
												ctx31.stroke();
											}
											//绘制二维码
											const ERImg = new Image();
											ERImg.src = this.imgBase64ERcode;
											ERImg.onload = () => {
												ctx31.drawImage(ERImg, 478*2, 816*2, 300, 300);
												fun.dealImage(c31.toDataURL("image/png"), this
													.reduceVal, (res) => {
														this.canvasImg = res
														//console.log(res);
														this.postAppShare(res);
														c31.style.display = 'none'
													})

											}
									}
							}
							break;
							default: //自定义
						  let  c4 = document.getElementById("canvasBox");
						  c4.width = 646*2;
						  c4.height = 996*2;
						  let ctx4 = c4.getContext("2d");
						  let  bg4 = new Image();
						  fun.getBase64(dataArray[0].imgUrl, '', function(res) {
						  	bg4.src = res
						  });
						   bg4.onload = ()=>{
							 ctx4.drawImage(bg4, 0, 0, 646*2, 796*2);
							  const mengCeng = new Image();
							  mengCeng.src = this.mengCengApp;
							  mengCeng.onload = ()=>{
								  ctx4.drawImage(mengCeng, 0, 463*2, 646*2, 529*2); //起始   +大小
								  const TXImg1 = new Image();
								  TXImg1.src = this.txBase;
								  TXImg1.onload = () => {
								  	fun.circleImg(ctx4, TXImg1, 28*2, 828*2, 100);
								  	ctx4.fillStyle = "#000000"; //昵称
								  	ctx4.font ="normal small-caps 500 60px Microsoft Yahei In-Bold Font";
								  	ctx4.fillText(this.nickname, 148*2, 858*2);
								  		const ERImg = new Image();
								  		ERImg.src = this.imgBase64ERcode;
								  		ERImg.onload = () => {
								  			ctx4.drawImage(ERImg, 474*2, 807*2, 145*2,145*2);
								  			fun.dealImage(c4.toDataURL("image/png"), this.reduceVal, (res) => {
								  					//console.log(res)
													this.postAppShare(res);
													c4.style.display = 'none'
								  				})
								  		}
								  }
							  }
						   }
							break;
					}
				})
			},
			postAppShare(base64Pic) {
				base64Pic = base64Pic.slice(23); //删除data:image/jpeg;base64,
				if (!base64Pic) return console.log('canvas 生成base64为空');
				let shareUrl = fun.getCurPageUrl('live',this.roomId);
				const {name} = this.$store.state.SysOrgInfo || {};
				const {shareTitle,shareDesc,shareIcon} = this.$store.state.orgShareObj || {};//机构分享
				let {roomInfo: {shareTitel,title,shareSubtitle,intro}} = this.roomInfo;
				//直播间分享标题>直播主题>机构默认分享主题>默认值
				let shareTitleLive = shareTitel || title || shareTitle  ||  '【' + name + '】一起来看直播吧！';
				let summary = shareSubtitle || intro ||shareDesc  || "精彩直播，尽在" + name + "手机直播！" ;
				if (window.terminal.isZxjtAndroid) {
					KDS_Native.shareLive(shareTitleLive, shareUrl, summary, base64Pic)
				} else if (window.terminal.isZxjtIos) {
					let json = {
						"title": shareTitleLive,
						"shareUrl": shareUrl,
						"summary": summary,
						"base64Pic": base64Pic
					}
					window.webkit.messageHandlers.shareLive.postMessage(json)
				}
			},
			formChildData(data) {
				const { title, anchor, roomId, roomStatus } = this.roomInfo.roomInfo;
				switch (data.type) {
					case 'clickActiveRightTop':
						this.activeDataArray = this.activityArray[2];
						fun.activityDotNumFun(0, this.activityArray[2][0].id);
						window.sessionStorage.setItem('activityIconInfo', JSON.stringify(this.activityArray[2][0]))
						this.activeTitle = this.activityArray[2][0].name;
						this.$store.dispatch("globalMask", {
							isShow: true,
							bgColor: ''
						});
						this.showActionSheet = 'footerPop'
						break;
					case 'clickPreviewInvite': //预告页邀请
					case 'shareLive':
						// 神策打点（邀请）
						$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
							page_name: `直播${['预告', '详情'][roomStatus]}页`,
							user_nickname: this.$store.state.userInfo.nickname,
							live_room_id: roomId,
							live_room_name: title,
							live_room_status: ['预告', '直播中'][roomStatus],
							live_room_creator: anchor,
							function_name: '邀请',
						});
						if (this.$store.state.isYk) {
							fun.ykDisposeFun();
						} else {
							if (window.terminal.isZxjtApp) {
								this.getInviteBgList(this.roomId);
							} else if (window.terminal.isZxjtqhApp) {//建投期货app
								let { shareTitel, shareSubtitle, shareImgurl, } = this.roomInfo.roomInfo
								fun.zxjtqhShare('liveRoom', "22,23,24,1", shareTitel, fun.getCurPageUrl('live', this.roomId), shareSubtitle, shareImgurl)
							} else if (window.terminal.weixin) {
								this.isInvitationCard = true;
							} else {
								this.isInvitationCard = true;
							}
						}
						break;
					case 'timePreviewEnd':
						this.isPlayBtn = true
						this.getVideoSrc(); //视频流
						this.isPreviewPage = false;
						break;
					case 'closeLiveTopPopup':
					case 'closeSmsVer'://关闭短信验证弹框
						this.vantPopupShow = false;
						break;
					case 'scanBtn': //headerLive
						this.rewardInfo = data.data
						this.isApplyContentCom = true;
						break;
					case 'topWord': //headerLive
						this.popupObj.position = 'top'
						this.popupObj.width = '100%'
						this.popupObj.heigth = '25.375rem'
						this.popupObj.round = false;
						this.popupObj.isPopupGlobalMask = true;
						this.isPopupCom = 'LiveTopPopup'
						this.vantPopupShow = true
						break;
					case 'liveMore': //headerLive
						this.popupObj.position = 'right'
						this.popupObj.width = '12.875rem'
						this.popupObj.heigth = '100%';
						this.popupObj.round = false;
						this.popupObj.isPopupGlobalMask = true;
						this.isPopupCom = 'LiveRightNav'
						this.vantPopupShow = true
						break;
					case 'lotteryBtn': //headerLive
						// 神策打点（抽奖）
						$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
							page_name: `直播${['预告', '详情'][roomStatus]}页`,
							user_nickname: this.$store.state.userInfo.nickname,
							live_room_id: roomId,
							live_room_name: title,
							live_room_status: ['预告', '直播中'][roomStatus],
							live_room_creator: anchor,
							function_name: '抽奖',
						});
						this.getLotteryById()
						break;
					case 'inviteBtn': //headerLive
						this.showActionSheet = 'ZxjtLiveInvitationList'
						this.$store.dispatch("globalMask", {
							isShow: true,
							bgColor: ''
						});
						break;
					case 'report': //举报
						this.$store.dispatch("globalMask", {
							isShow: true,
							bgColor: ''
						});
						this.showActionSheet = 'ReportPop'
						break;
					case 'closeReportPop': //关闭举报
						this.$store.dispatch("globalMask", {
							isShow: false,
							bgColor: ''
						});
						this.showActionSheet = ''
						break;
					case 'applyInfo': //报名中奖信息
						// 神策打点（答题 1 问卷 3 投票 4 报名 6）
						$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
							page_name: `直播${['预告', '详情'][roomStatus]}页`,
							user_nickname: this.$store.state.userInfo.nickname,
							live_room_id: roomId,
							live_room_name: title,
							live_room_status: ['预告', '直播中'][roomStatus],
							live_room_creator: anchor,
							function_name: '报名',
						});
						this.$store.dispatch("globalMask", {
							isShow: true,
							bgColor: ''
						});
						this.showActionSheet = 'ApplyInfo'
						break;
					case 'closeApplyInfo': //报名中奖信息
						this.$store.dispatch("globalMask", {
							isShow: false,
							bgColor: ''
						});
						this.showActionSheet = ''
						break;
					case 'activityChildArray': //单个活动数据
						this.activeDataArray = data.data;
						this.activeTitle = data.data.name;
						this.$store.dispatch("globalMask", {
							isShow: true,
							bgColor: ''
						});
						this.showActionSheet = 'FooterPop';
						break;
					case 'closeInvitation': //关闭邀请卡组件
						this.isInvitationCard = false;
						break;
					case 'triggerPrizeInfo': //triggerPrizeInfo
						this.showActionSheet = '';
						this.$store.dispatch("globalMask", {
							isShow: false,
							bgColor: ''
						});
						this.winInfoData = data.data; //触发直播间单个奖品
						break;
					case 'minePrizeLiveList': //我的奖品列表
						this.getLivePrizeList()
						break;
					case 'closeAllPrizeCom': //关闭抽奖组件
						this.isTurntable = false;
						break;
					case 'clickLivePrize': //点击抽奖按钮
						// 神策打点（抽奖）
						$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
							page_name: `直播${['预告', '详情'][roomStatus]}页`,
							user_nickname: this.$store.state.userInfo.nickname,
							live_room_id: roomId,
							live_room_name: title,
							live_room_status: ['预告', '直播中'][roomStatus],
							live_room_creator: anchor,
							function_name: '抽奖',
						});
						this.getLotteryById()
						break;
					case 'applyContentClose':
						this.isApplyContentCom = false;
						this.$store.dispatch("globalMask", {
							isShow: false,
							bgColor: ''
						});
						break;
					case 'clickShoppingBtn': //商品数据
						this.getShoppingData('rightBtnFrom')
						break;
					case 'footerVantPopClose':
						this.vantPopupShow = false;
						setTimeout(() => {
							this.isPopupCom = null
						}, 300)
					    break;
					case 'footerActionSheetClose': //关闭底部弹出面板
					case 'closeAllPopup': //关闭所有弹出层
						this.showActionSheet = ''
						this.$store.dispatch("showMask", false);
						this.$store.dispatch("globalMask", {
							isShow: false,
							bgColor: ''
						});
						break;
					case 'footerActionSheetOpen': //打开 更多 往期回看 热门产品 本期产品 面板
						if (data.data.component == 'TouWenDa') { //投问答
							this.$refs.childRightWrap.openAnswer(data.data.qaInfoId, data.data.qaType);
							this.showActionSheet = ''
							return
						}
						this.showActionSheet = data.data.component
						this.sheetTitle = data.data.title
						this.$store.dispatch("showMask", true);
						break;
					case 'footerOrderListClose': //商品列表面板
						this.showActionSheet = ''
						this.$store.dispatch("showMask", false);
						break;
					case 'shoppingOrderListComNum': //商品 总数
						this.shoppingNum = data.data; //更改footer 组件里面的商品数量
						break;
					case 'historyRedPcaketListArray': //历史红包
						this.enterType = 'redBtn';
						this.redListParent = data.data;
						this.isRedPacketCom = true;
						break;
					case 'closeRedPacketCom': //关闭红包组件
						this.isRedPacketCom = false;
						break;
					case 'sendImNotice': //发送im消息startToLive
						this.SendImMsg(data.data.tmpMsg);
						break;
					case 'liveRemind': //发送im消息startToLive
						this.isLiveRemindSuccess = true; //成功提醒组件
						break;
					case 'closeLiveRemindSuceesBox': //关闭开播提醒成功组件
						this.isLiveRemindSuccess = false; //成功提醒组件
						break;
					case 'startToLive': //开始直播
						this.videoCoverBox = true; //显示背景图片
						this.isPlayBtn = true; //显示播放按钮
						this.getVideoSrc(); //视频流
						break;
					case 'showMask': //投 卷 答弹窗已打开
						this.$store.dispatch("showMask", true);
						break;
					case 'closeAll': //关闭弹窗
						this.showActionSheet = ''
						this.showSpeakerSheet = false //关闭置顶留言面板
						this.$store.dispatch("showMask", false);
						break;
					case 'stickMsgSheetClose': //关闭置顶留言面板
						this.showSpeakerSheet = false
						this.$store.dispatch("showMask", false);
						break;
					case 'closeNoticeBbar': //关闭跑马灯
									this.noticeBbarClass = 'animate__bounceOutLeft';
						this.marqueeArray = this.marqueeArray.slice(1);
						setTimeout(()=>{
						this.isMarquee = false
						},3000)
						break;
					case 'reportMsgData': //举报留言
						this.reportMsgObj = data.data;
						this.popupObj = {
							'position': 'bottom',
							'width': '100vw',
							'height': 'auto',
							'isOverlay': true,
							'round': true,
							'isPopupGlobalMask': true,
							},
						this.isPopupCom = 'reportMsgCom'
						this.vantPopupShow = true;
						break;
					case 'closeVantPopup': //关闭vant弹出框组件
						this.vantPopupShow = false;
						setTimeout(() => {
							this.isPopupCom = null
						}, 300)
						break;
					case 'meetingSummary'://点击会议纪要弹出窗口
						this.popupObj = {
							'width': '85%',
							'height': '70%',
							'isOverlay': true,
							'round': true,
							'isPopupGlobalMask': true,
						},
						this.isPopupCom = 'meetingSummaryCom';
						this.vantPopupShow = true;
						break;
					case 'meetingMaterial'://点击会议材料弹出窗口
						this.$store.dispatch("globalMask", {
							isShow: true,
							bgColor: ''
						});
						this.showActionSheet = 'meetingMaterialCom'
						break;
					case 'cleckMaterial'://点击查看材料弹出窗口
						this.popupObj = {
							'position': 'bottom',
							'width': '100%',
							'height': 'auto',
							'isOverlay': true,
							'round': true,
							'isPopupGlobalMask': true,
						},
						this.isPopupCom = 'cleckMaterialCom';
						this.vantPopupShow = true;
						this.meetingMsg = data.dataMsg
						break;
					case 'downloadMaterial'://点击下载材料弹出窗口
						this.popupObj = {
							'width': '85%',
							'height': '25%',
							'isOverlay': true,
							'round': true,
							'isPopupGlobalMask': true,
						},
						this.isPopupCom = 'downloadMaterialCom';
						this.vantPopupShow = true;
						this.meetingMsg = data.dataMsg
						break;
					default:
						break;
				}
			},
			getRedHistoryListData() { //舍弃
				if (this.$store.state.isYk) {
					fun.toastMessage("亲，登录后才能抢红包哦～", 3000)
					return;
				}
				this.enterType = 'redBtn';
				let params = {
					'qid': Math.random(),
					'roomId': this.roomId
				}
				this.$http.post('/packet/room_packet_list', this.$qs.stringify(params)).then( //点击商品统计
					res => {
						//console.log(res.data)
						if (res.data.code == "000000") {
							if (res.data.data) { //防止null
								if (res.data.data.length) {
									this.redListParent = res.data.data;
									this.isRedPacketCom = true;
								} else {
									fun.toastMessage('红包马上开始，不要离开哦...')
								}
							} else {
								fun.toastMessage('红包马上开始，不要离开哦...')
							}

						}
					},
					err => {
						console.log("商品统计接口错误")
					}
				)
			},
			//置顶留言面板
			openSpeakerSheet() {
				//   this.showActionSheet = ''
				this.showSpeakerSheet = true
				this.$store.dispatch("showMask", true);
			},
			sheetBeforeEnter(el, done) { //底部面板 弹出之前
				Velocity(
					el, {
						translateY: '100%',
					}, {
						duration: 0,
						easing: "ease-out",
						complete: done
					}
				)
			},
			sheetEnter(el, done) { //底部面板 弹出时
				Velocity(
					el, {
						translateY: '0%',
						// translateY: -document.body.clientHeight*112/750,
					}, {
						duration: 500,
						easing: "ease-out",
						complete: done
					}
				)
			},
			sheetAfterEnter(el, done) { //弹出之后
				this.$store.dispatch("setIsGlobalMaskClick", true);
			},
			sheetBeforeLeave(el, done) { //弹出之前
				Velocity(
					el, {
						translateY: '100%',
					}, {
						duration: 800,
						complete: done
					}
				)
			},
			sheetLeave(el, done) {},
			sheetAfterLeave(el, done) {},
			//留言
			getRoomComment() { //scene id
				this.$http.get("/h5live/historyMessage?roomId=" + this.roomId + "&id=" + this.pageId + "&page=" + this
					.fenYePage).then(
					res => {
						let msgHtml = "";
						let _this = this;
						if (res.data.code == "000000") {
							let dataMsg = res.data.data.msg.items;
							_this.totalPage = res.data.data.msg.totalPage;
							// "enableRiskWarn":0 -关闭 1 开启
							let {
								enableRiskWarn,
								riskWarnMsg
							} = _this.roomInfo.zbRiskWarn
							if (enableRiskWarn == 1) {
								let riskTip = {
									'type': 'riskWarn',
									'message': this.isTencentLive ? _this.riskWarnTencent : riskWarnMsg//如果是腾讯创建的直播间，使用riskWarnTencent
								}
								dataMsg.unshift(riskTip)
							}
							if (dataMsg.length) {
								if (dataMsg[0].id) {
									_this.pageId = dataMsg[0].id;
								}
							}
							let messageHtml = "";
							//type 0是留言  1是点赞  2是红包  3是答题  4是问卷  5是投票 6 助理回复  7 送礼物 riskWarn：风险提示
							//							<li class="message-box-li">
							//						     <span class="nick-name">臭豆腐西施：</span><span class="message-text">这主的还挺受用的</span>
							//					        </li>
							dataMsg.forEach(function(ele, index) {
								let comma = '<span class="comma">：</span>'
								let myMsg = '';
								let highlightMe = '';
								let nickNameMe = ''
								if (ele.un == _this.currentUn) {
									myMsg = '<span class="my-tip">我</span>'
									highlightMe = 'highlight-me';
									nickNameMe = 'nick-name-me'
								}
								if (ele.type == 'riskWarn') {
									messageHtml =
										`<li class="message-box-li risk-warm"><span>${ele.message}</span></li>`;
								} else if (ele.type == '1') { //点赞消息
									messageHtml =
										`<li class="message-box-li ${highlightMe}"><span class="nick-name ${nickNameMe}" style="margin-right:4px">${ele.nickName}</span>${myMsg}${comma}<span class="message-text" ><i style="color:gold">送出${ele.message}个赞</i></span></li>`;
								} else if (ele.type == '2') {
									messageHtml = `<div style="display:none"></div>`
								} else if (ele.type == '3') {
									//messageHtml = '<div class="connect-boxText"><div class="HDClass">提交了答题~ <div class="HDimg classDT"></div></div></div>'
								} else if (ele.type == '4') {
									//messageHtml = '<div class="connect-boxText"><div class="HDClass">提交了问卷~ <div class="HDimg classWJ"></div></div></div>'
								} else if (ele.type == '5') {
									//messageHtml = '<div class="connect-boxText"><div class="HDClass">已投票成功~ <div class="HDimg classTP"></div></div></div>'
								} else if (ele.type == '6') { //助理回复
									messageHtml =
										`<li class="message-box-li">
									    <span class="official-box">
										  <span class="${_this.$channel === 'gdyh2' ? "official officialGdyh2" : 'official'}">官方</span>
										  <span class="official-name">${ele.nickName} ：</span>
									   </span>
									   <span class="nick-name">@${JSON.parse(ele.message.replace(/\n/g,"\\n").replace(/\r/g,"\\r")).parent.nickName}</span>
									   <span class="message-text">${JSON.parse(ele.message.replace(/\n/g,"\\n").replace(/\r/g,"\\r")).msg}</span>
									   <div  class="replaied-box">
										   <p>
											<span>${JSON.parse(ele.message.replace(/\n/g,"\\n").replace(/\r/g,"\\r")).parent.nickName+':'}</span>
											<span>${JSON.parse(ele.message.replace(/\n/g,"\\n").replace(/\r/g,"\\r")).parent.message}</span>
										   </p>
									  </div>
									</li>`;
								} else if (ele.type == '7') { //送礼消息
									messageHtml =
										`<li class="message-box-li ${highlightMe}"><span class="nick-name ${nickNameMe}" style="margin-right:4px">${ele.nickName}</span>${myMsg}${comma}<span class="message-text message-text-left"><i style="color:#eb5a6a">${ele.message}</i></span></li>`;
								} else if (ele.type = '0') { // 普通消息
									if (ele.un != null && (ele.un.includes('zbzlpt') || ele.un == _this.roomInfo.roomInfo.anchor)) { //小助手 obs主播发言ele.un == this.roomInfo.roomInfo.anchor
										messageHtml = `<li class="message-box-li">
											    <span class="official-box">
											         <span class="${_this.$channel === 'gdyh2' ? "official officialGdyh2" : 'official'}">官方</span>
											    </span>
                                                  <span class="nick-name"> ${ele.un == _this.roomInfo.roomInfo.anchor ?'主播':ele.nickName} ：</span>
											    <span class="message-text">${ele.message}</span>
										    </li>`
									} else { //普通消息
										messageHtml = `<li class="message-box-li ${highlightMe}">
											<span class="nick-name ${nickNameMe}">${ele.nickName}</span>
											${myMsg}
											${comma}
											<span class="message-text message-text-left">${fun.searchIphoneNum(ele.message)}</span>
										 </li>`
									}
									//  messageHtml =
									//   `<li class="message-box-li">
									// 		<img src=${ele.avator || imgTx} />
									// 		<span class="nick-name">${ele.nickName}：</span>
									// 		<span class="message-text">${ele.message}</span>
									// 	</li>`;
								} else {
									messageHtml =
										`<li class="message-box-li">
									    <span class="official-box">
										  <span ${ele.type==6||(ele.un!=null && (ele.un.includes('zbzlpt') || ele.un == _this.roomInfo.roomInfo.anchor))?'class="' + _this.$channel === 'gdyh2' ? "official officialGdyh2" : 'official' + '"':'class="official-hidden"'}>官方</span>
										  <span ${ele.type==6?'class="official-name"':'class="official-hidden"'}>${ele.un == _this.roomInfo.roomInfo.anchor ?'主播':ele.nickName}</span>
									   </span>
									   <span class="nick-name">${ele.type==6 ? '@'+JSON.parse(ele.message).parent.nickName:ele.nickName}:</span>
									   <span class="message-text">${ele.type==6 ? JSON.parse(ele.message).msg:ele.message}</span>
									   <div  ${ele.type==6?' class="replaied-box"':'class="official-hidden"'}>
										   <p>
											<span>${ele.type==6 ? JSON.parse(ele.message).parent.nickName+':':''}</span>
											<span>${ele.type==6 ? JSON.parse(ele.message).parent.message:''}</span>
										   </p>
									  </div>
									</li>`;
								}
								msgHtml += messageHtml;
							});
							_this.$refs.msgContent.innerHTML = msgHtml;
							// 初始化留言板滚动（在初始化留言信息之后）
							_this.$nextTick(() => {
								_this.bs = new BScroll('.message-box', {
									// bounceTime: 0,
									startY: _this.$refs.msgWrapper.clientHeight - _this.$refs
										.msgContent.clientHeight, // 最大滑动距离
									probeType: 3,
									bindToWrapper: true // 触摸范围限制容器内
								})
								_this.bs.on('scroll', pos => {
									// 滑动到顶部，加载历史消息
									if (pos.y > 0 && _this.scrollSwitch === true && _this.fenYePage <
										_this.totalPage) {
										_this.rendScrollDom()
									} else if (pos.y > 0 && _this.fenYePage === _this.totalPage &&
										_this.$refs.msgContent.children.length > 7) {
										fun.toastMessage('没有更多留言~')
									}
								})
							})

						}
					},
					err => {
						console.log(err);
					}
				);
			},
			//自定义消息跑马灯
			pmdData(data) {
				// data = {"type":"pmd","content":"跑马灯内容","number":"2"}
				for (let i = 0; i < data.number; i++) {
					this.marqueeArray.push(data.content)
				}
			},
			// 点击留言信息进行举报
			clickMsgContent(e) {
				if (e.target.className == 'message-text message-text-left' || e.target.className == 'message-text') {
					const parentNode = e.target.tagName === 'LI' ? e.target : e.target.tagName === 'SPAN' ? e.target.parentNode : ''

					if (!parentNode) return false
					const name = parentNode.firstElementChild.innerText
					const message = parentNode.lastElementChild.innerText

					this.popupObj = {
							'position': 'bottom',
							'width': '100vw',
							'height': 'auto',
							'isOverlay': true,
							'round': true,
							'isPopupGlobalMask': true,
						},
						this.vantPopupShow = true;
						this.isPopupCom = 'reportMsgCom'
						this.reportMsgObj = {
						name,
						message
					}
				}
			},
			// 送礼 提示 动画
			TipUnBeforeEnters(el) { //进入之前
				el.style.opacity = 1;
			},
			TipUnEnters(el, done) { //进入
				let _this = this
				Velocity(
					el, {
						translateX: document.body.clientWidth * 277.5 / 375,
					}, {
						duration: 0,
						easing: "ease-in-out",
						complete: done
					}
				);
			},
			TipUnAfterEnters(el, done) { //进入之后
				Velocity(
					el, {
						opacity: 1,
					}, {
						duration: 3000,
					}
				);
				setTimeout(() => {
					let giftInfo = this.$store.state.giftMessageQueue.slice(1);
					this.$store.dispatch("giftMessageQueue", giftInfo)
					this.$store.dispatch("showSendGiftFlag", false)
				}, 3000);
			},
			TipUnBeforeLeaves(el, done) { //离开之前
				el.style.display = 'none'; // 隐藏后再进行移动，否则会出现弹回效果
				Velocity(
					el, {
						translateX: -document.body.clientWidth * 317.5 / 375,
					}, {
						duration: 0,
						complete: done
					}
				);
			},
			TipUnLeaves(el, done) { //离开
			},
			// 收到刷礼物消息推送
			giftMsgTips(sendGiftMsg) {
				// console.log('liveMsg页面 - 收到刷礼物消息推送', sendGiftMsg);
				// console.log('liveMsg页面 - 收到刷礼物消息推送 - 是否为本人推送',isSelfSendFlag, this.un, sendGiftMsg.sendUserId);
				// 是否为本人发送礼物的标记
				let isSelfSendFlag = this.un === sendGiftMsg.sendUserId;
				if (isSelfSendFlag) {
					return;
				}
				// this.giftMessageQueue.push(sendGiftMsg);
			},
			// 跑马灯 和进入房间提示
			setIntervalLiveRoom() {
				this.liveRoomInterval = setInterval(this.setInterFun, 3000);
			},
			setInterFun: function() {
				if (this.marqueeArray.length > 0 && this.isMarquee == false) { //跑马灯
					this.isMarquee = true;
          this.noticeBbarClass = 'animate__bounceInRight'
				}
				if (this.marqueeTipUnArray.length > 0) { //进入房间提示
					this.marqueeTipUnShow = true
					if (this.marqueeTipUnArray.length > 50) {
						let randomNum = this.random(3, 10)
						this.comeTip = `等${randomNum}人 来到直播间`
						this.marqueeTipUnArray = this.marqueeTipUnArray.slice(randomNum)
					}

				}
				if (this.giftMessageArray.length > 0 && !this.showSendGiftFlag) { //有送礼提示，且礼物画面不在播放中
					this.$store.dispatch("showSendGiftFlag", true)
				}
			},
			// 随机整数
			random(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},

			//进入房间方法
			TipUnBeforeEnter(el) { //进入之前
				el.style.opacity = 1;
				this.marqueeTipClass = this.getMarqueeTipUnClass()
			},
			TipUnEnter(el, done) { //进入
				let _this = this
				Velocity(
					el, {
						translateX: _this.computeLeft,
					}, {
						duration: 1000,
						easing: "ease-in-out",
						complete: done
					}
				);
			},
			TipUnAfterEnter(el, done) { //进入之后
				Velocity(
					el, {
						opacity: 1
					}, {
						duration: 1000,
						complete: done
					}
				);
				Velocity(
					el, {
						opacity: 0,
					}, {
						duration: 250,
						complete: done
					}
				);
				Velocity(
					el, {
						translateX: -200,
					}, {
						duration: 0,
						complete: done
					}
				);
				setTimeout(() => {
					this.marqueeTipUnArray = this.marqueeTipUnArray.slice(1);
					this.marqueeTipUnShow = false;
				}, 1410)
			},
			TipUnBeforeLeave(el, done) { //离开之前
				Velocity(
					el, {
						translateX: -200,
					}, {
						duration: 1000,
						complete: done
					}
				);
			},
			TipUnLeave(el, done) { //离开
			},
			//随机弹幕class色值
			getMarqueeTipUnClass() {
				let marqueeTipUnClass = ["marquee-tip-blue", "marquee-tip-orange", "marquee-tip-orange1"];
				let n = Math.floor(Math.random() * marqueeTipUnClass.length + 1) - 1;
				return marqueeTipUnClass[n];
			},
			playBtn() { //播放按钮
				this.playBegin();
			},
			playBegin() { // 开始播放
				this.isVideoDom = true; //视频 dom显示
				this.isPlayBtn = false;
				if (this.roomInfo.roomInfo.roomStatus != '0') { //直播中
					this.setFrontImg(); //前景图
				}
				this.$refs.videoCom.playStart();
				this.videoCoverBox = false;
			},
			getVideoSrc() { //视频流
				// tid = '' 原画 saas-lhd 高清 saas-lsd 标清
				// isRTC = true 开启 false 关闭
				const {
					roomId,
					tid,
					isRTC
				} = this
				this.$http.get(`/h5live/v1/play-stream-url?roomId=${roomId}&tid=${tid}&isRtc=${isRTC}`).then(
					res => {
						if (res.data.code = "000000") {
							let videoSrc = res.data.data;
							this.$store.dispatch("videoSrc", videoSrc);
						}
					},
					err => {
						console.log(err);
					}
				);
			},
			//im推送了答题等
			pushVote(obj) {
				//触发子组件的消息推送
				this.$refs.childRightWrap.pushVote(obj);
				//this.$parent.getRoomInfo();
			},
			//im推送了报名
			pushBaoMing() {
				this.$store.dispatch("globalMask", {
					isShow: true,
					bgColor: ''
				});
				this.showActionSheet = 'ApplyInfo'
			},
			// 商品讲解组件是否显示
			getProduct(val) {
				this.isProductShow = val;
			},
			// socket 获取商品讲解消息
			appendExpGoods(productObj) {
				//1 app 2 wx 3 mini  goodsTarget
				const obj = {
					'app':1,
					'wx':2,
					'mini':3
				}
				if (JSON.stringify(productObj) !== {}) {
					const plat = this.$store.state.axiosPlat ;
					if(obj[plat] == productObj.goodsTarget ){
						if (productObj.enIntro == '1') {//讲解中
							this.isProductShow = true
							this.productObj = productObj
						} else {
							this.isProductShow = false
							this.productObj = {}
						}
					}
				}
			},
			//置顶留言 限制字数
			wordlimit() {
				//替换掉所有的 html标签，得到Html标签中的内容
				let content = this.roomInfo.roomInfo.topWord;
				let content2 = content.replace(/<\/?.+?>/g, "");
				let content3 = content2.replace(/ /g, ""); //得到后的内容
				if (content3.length > 10) { //超过十个显示省略号
					this.topWordText = content3.substring(0, 10) + '...'
				} else {
					this.topWordText = content3
				}
			},
			// gszq继续观看 继续预约
			gszqWatchOrder(roomId) {
				this.$http.post(`/h5live/user/trace/authorize_room/save?businessId=${roomId}`).then(res => {
					if (res.data.code == '000000') {
						if (this.btnVal2 == '继续观看') {
							this.playBegin(); //播放
						} else if (this.btnVal2 == '继续预约') {
							this.$refs.countDownCom.postRemindData('1')
						}
						this.isAuthorizePass = true
					}
				}, err => console.log(err));
			},
			// 停播消息  违规消息
			closeLiveMsg(data) {
				this.$refs.videoCom.$refs.videoref.pause(); //暂停播放 避免有声音
				switch (data.type) {
					case "closeLiveEnd": //正常停播消息
						this.$emit("sendFather", {
							type: 'closeLiveEnd',
							data: data
						})
						break;
					case "violations": // 违规停播
						this.$emit("sendFather", {
							type: 'violations',
							data: data
						})
						break;
					default:
				}
			},
			// 新消息跳转底部
			newIMJumpButtom() {
				this.$nextTick(() => {
					const preMaxScrollY = this.bs.maxScrollY
					this.bs.refresh()
					if (this.bs.y === preMaxScrollY) this.bs.scrollToElement(this.$refs.msgContent
						.firstElementChild, 200)
				})
			}
		},
	}
</script>
<style>
	.van-toast.my-toast-ps {
		top: 50%;
	}
</style>
<style scoped="scoped" >
  .lucky {
    position: fixed;
    bottom:180px;
    right:0px;
    z-index:1000
  }
  .lucky img{
    width: 140px;
    height: 140px;
  }
  .lucky .text {
    position: absolute;
    bottom: 12px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    line-height: 37px;
  }

	.black-zxyh {
		width: 100vw;
		height: 500px;
		background: rgba(0, 0, 0, 0.4);
	}

	.zxyh-bg {
		width: 100vw;
		height: 265px;
		background: white;
		display: flex;
	}



	.top-shadow {
		width: 100vw;
		height: 300px;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
		position: absolute;
		top: 0;
		left: 0;
	}

	.portrait-screen-live-box {
		width: 100%;
		height: 100%;
		background: black;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 0 0;
		overflow: hidden;
		position: relative;
	}

	.video-cover-box-second-mode {
		width: 100vw;
		height: 100vh;
		/*background: pink;*/
		position: absolute;
		bottom: 175px;
		left: 0;
		z-index: 3;
	}

	.cover-video-img {
		height: 100%;
		width: 100%;
		display: block;
		object-fit: contain;
	}

	.video-cover-box {
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}

	.video-cover-box .cover-video-img {
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}

	.play-btn {
		width: 120px;
		height: 120px;
		background: url(../../../assets/images/play-img.svg) no-repeat;
		background-size: 120px 120px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -60px;
		margin-left: -60px;
		z-index: 10;
	}

	.video-cover-box-second-mode .play-btn {
		z-index: 1000;
	}

	.close-btn {
		width: 100px;
		height: 80px;
		position: absolute;
		top: 22px;
		left: 0px;
		/*background: pink;*/
		z-index: 13;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background: url(../../../assets/images/video-click-pic.png) no-repeat center center;
		background-size: 55px 55px; */
	}

	.close-btn .icon-back {
		display: inline-block;
		height: 30px;
		width: 16px;
		background: url(../../../assets/images/back-icon.png) no-repeat;
		background-size: 100% 100%;
	}




	.count-down-container {
		/* position: absolute;
		top: 168px;
		left: 0px;
		padding-left: 30px;
		z-index: 10; */
		margin-bottom: 20px;
	}


	.message-box {
		width: 520px;
		height: 400px;
		/*background: silver;*/
		position: absolute;
		bottom: 170px;
		left: 30px;
		z-index: 10;
		/* display: flex;
      align-items: flex-end; */
		/* overflow-y: scroll; */
		overflow: hidden;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 100%);
	}

	/* .message-box-li {
      background: saddlebrown;
      padding-top: 10px;
      line-height: 45px;
    } */

	/* .message-box-scroll {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    } */

	.message-box-ul {
		/* position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0; */
		width: 100%;
		display: flex;
		flex-direction: column-reverse;
		justify-content: flex-start;
		z-index: 13;
	}

	.product-warp+.message-box-ul {
		bottom: 160px;
	}

	.message-box-ul>>>.nick-name {
		color: #FFD800 !important;
	}

	.message-box-ul>>>.nick-name-me {
		color: rgba(113, 249, 255, 0.9) !important;
	}

	.message-box-ul>>>.highlight-me {
		border: 1px solid rgba(113, 249, 255, 0.9);
	}


	.message-box-ul>>>.message-box-li {
		position: relative;
		margin: 5px 0;
		width: fit-content;
		background: rgba(0, 0, 0, 0.29);
		padding: 0 10px;
		border-radius: 20px;

	}

	.message-box-ul>>>.message-text-left {
		margin-left: -10px;
	}

	.message-box-ul>>>.message-box-li img {
		width: 45px;
		height: 45px;
		float: left;
		margin-right: 16px;
		border-radius: 50%;
		/* line-height: 90px; */
	}

	.message-box-ul>>>.message-box-li span {
		font-size: 26px;
		font-weight: 500;
		color: #fff;
		line-height: 46px;
		margin-top: 5px;
		word-break: break-all;
	}

	.marquee-tip-blue {
		position: fixed;
		left: -400px;
		bottom: 620px;
		z-index: 10;
		background: rgba(54, 209, 255, 1);
		opacity: 0.85;
		border-radius: 8px;
		color: white;
		font-size: 24px;
		padding: 10px 16px;
		text-align: center;
		font-weight: 500;
	}

	.marquee-tip-orange {
		position: fixed;
		left: -400px;
		bottom: 620px;
		z-index: 10;
		background: #ff9e63;
		opacity: 0.85;
		border-radius: 8px;
		color: white;
		font-size: 24px;
		padding: 10px 16px;
		text-align: center;
		font-weight: 500;
	}

	.marquee-tip-orange1 {
		position: fixed;
		left: -400px;
		bottom: 620px;
		z-index: 10;
		background: #ff7162;
		opacity: 0.85;
		border-radius: 8px;
		color: white;
		font-size: 24px;
		padding: 10px 16px;
		text-align: center;
		font-weight: 500;
	}

	.marquee-tip span {
		margin-right: 10px;
	}

	.person-list {
		position: absolute;
		top: 340px;
		left: 30px;
		z-index: 10;
		color: red;
	}

	.gradient-color-bg {
		width: 100vw;
		height: 558px;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 9;
	}

	.gift-bg-mask {
		width: 100vw;
		height: 100vh;
		background: transparent;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 12;
	}

	.marquee-box {
		height: 60px;
		position: fixed;
		top: 26px;
		/*right: 0;*/
		z-index: 1100;
		display: flex;
		background: rgba(255, 253, 238, 0.9);
		align-items: center;
		justify-content: center;
		white-space: nowrap !important;
		padding: 0 30px;
		height: 58px;
		line-height: 58px;
		font-size: 32px;
		color: #E9672F;
		border-radius: 2px;
	}

	/* 官方小助手 */

	.message-box-ul>>>.message-box-li .official-box .official {
		display: inline-block;
		width: 70px;
		background: linear-gradient(180deg, #FE807F 0%, #FF3338 100%);
		border-radius: 6px;
		line-height: normal;
		padding: 2px 0 3px;
		text-align: center;
		color: white;
		font-size: 22px;
		margin-right: 6px;
	}

	.message-box-ul>>>.message-box-li .official-box .officialGdyh2 {
		background: linear-gradient(180deg, #AB5BEA 0%, #732ED0 100%);
	}

	.message-box-ul>>>.message-box-li .official-box .official-hidden {
		display: none;
	}

	.message-box-ul>>>.message-box-li .replaied-box {
		position: relative;
		width: 100%;
		margin-top: 10px;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 10px;
	}

	.message-box-ul>>>.message-box-li .replaied-box p {
		padding: 7px 4px 10px 60px;
	}

	.message-box-ul>>>.message-box-li .replaied-box p span {
		font-size: 26px;
		font-weight: 400;
		color: #C3C3C3;
		line-height: normal;
	}

	.message-box-ul>>>.message-box-li .replaied-box:before {
		content: '';
		position: absolute;
		top: 14px;
		bottom: 18px;
		width: 4px;
		left: 20px;
		background: #C3C3C3;
	}

	/* 我 */
	.message-box-ul>>>.message-box-li .my-tip {
		position: absolute;
		top: 2px;
		height: 30px;
		margin-left: 5px;
		background: linear-gradient(#42F5E3, #296EEB);
		border-radius: 6px;
		line-height: 30px;
		padding: 2px 8px 0px;
		text-align: center;
		color: white;
		font-size: 18px;
	}

	.message-box-ul>>>.message-box-li .my-tip-im {
		margin-left: 12px;
	}

	.message-box-ul>>>.comma {
		color: #FFD800 !important;
	}

	.message-box-ul>>>.my-tip+.comma {
		margin-left: 50px;
	}


	/* 风险提示 */
	.message-box-ul>>>.message-box-li.risk-warm {
		padding: 12px;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 20px;

	}

	.message-box-ul>>>.risk-warm span {
		color: rgba(250, 228, 109, 1) !important;
		line-height: 38px;
	}

	.dianwo {
		display: inline-block;
		width: 180px;
		height: 40px;
		position: absolute;
		top: 100px;
		left: 30px;
		z-index: 10000;
		color: white;
		font-size: 24px;
		text-align: center;
		line-height: 40px;
		outline: none;
		border: none;
		background: darkgoldenrod;
	}

	.speaker-box {
		background: rgba(0, 0, 0, 0.4);
		border-radius: 20px;
		padding: 0 24px 0 12px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.speaker-box img {
		width: 24px;
		height: 24px;
	}

	.speaker-box p {
		font-size: 24px;
		font-weight: 400;
		color: #FFFFFF;
		margin-left: 16px;
		line-height: normal;
	}

	.top-word>>>* {
		font-size: 24px !important;
	}



	.wrap-right-box {
		position: absolute;
		top: 32px;
		right: 0;
		z-index: 11;
		display: flex;
		flex-direction: column;
		/* background: #006EFF; */
		align-items: flex-end;
		justify-content: flex-start;
	}

	.wrap-left-box {
		position: absolute;
		top: 170px;
		left: 30px;
		z-index: 11;
		display: flex;
		flex-direction: column;
		/*  background: #006EFF; */
		align-items: flex-start;
		justify-content: flex-start;
	}

	.more_live_btn {
		margin-bottom: 20px;
	}

	.front-pictures-box {
		position: relative;
		width: 100%;
		height: 100vh;
	}

	.front-img-top {
		width: 100vw;
		height: 280px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.front-img-bottom {
		width: 100vw;
		height: 630px;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		/*   display: inline-block;
   background-size: contain; */
	}

	.front-bottom,
	.front-top {
		width: 100%;
		height: 100%;
		background-size: cover;
	}

	.portrait-screen-live-box>>>.van-notice-bar {
		background-color: rgba(0, 145, 255, 0.5);
		height: 50px;
		line-height: 50px;
		font-size: 26px;
		color: white;
		top: 0px;
		z-index: 1;
	}

	.portrait-screen-live-box>>>.van-notice-bar__left-icon {
		font-size: 28px;
		padding-right: 10px;
	}

	.portrait-screen-live-box>>>.interaction-right-box {
		bottom: 125px;
	}

	.portrait-screen-live-box>>>.popClass {
		background: rgba(0, 0, 0, 0.3) !important;
	}

	.portrait-screen-live-box>>>.pop-up,
	.portrait-screen-live-box>>>.pop-up-child,
	.portrait-screen-live-box>>>.gift-panel-wrap {
		z-index: 1501;

	}

	.portrait-screen-live-box>>>.zan-animation-box {
		bottom: 150px;
	}

	.canvas-box {
		width: 646px;
		height: 992px;
		margin: 0 auto;
		background: white;
		display: none;
		position: absolute;
		top: 20px;
		left: 20px;
		z-index: 2222;
		border-radius: 26px;
	}

	/* 快捷消息回复 */
	.quickMessage {
		position: absolute;
		bottom: 134px;
		padding-left: 30px;
		width: 520px;
		height: 40px;
		overflow-x: scroll;
		overflow-y: hidden;
		z-index: 13;
	}

	.quickMessage ul {
		height: 40px;
		white-space: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	.quickMessage ul li {
		height: 32px;
		display: inline-block;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		border: 1px solid #979797;
		font-size: 22px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 30px;
		text-align: center;
		padding: 0 10px 0 11px;
	}

	.quickMessage ul li:not(:nth-child(1)) {
		margin-left: 15px;
	}
	.canvas-img{
		width: 646px;
		height: 992px;
		position: absolute;
		top: 200px;
		left: 50px;
		z-index: 2333;
	}
	.van-dialog {
		width: 450px;
		height: 370px;
		font-size: 28px;
		padding: 35px 35px 0;
	}

	.van-dialog>>>.van-dialog__content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.van-dialog>>>.van-dialog__content span {
		font-size: 32px;
		flex: 0;
	}

	.van-dialog>>>.van-dialog__content .van-radio-group {
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
	}

	.van-dialog>>>.van-dialog__content .van-radio-group .van-radio {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.van-dialog>>>.van-dialog__content .van-radio-group .van-radio .img-icon {
		width: 32px;
		height: 32px;
	}

	.van-dialog>>>.van-dialog__content .van-radio-group .van-radio .van-radio__icon {
		width: 32px;
		height: 32px;
	}

	.van-dialog>>>.van-dialog__content .van-radio-group .van-radio .van-radio__icon .van-icon {
		width: 32px;
		height: 32px;
	}

	.van-dialog>>>.van-dialog__content .van-radio-group .van-radio span {
		white-space: nowrap;
	}

	.van-dialog>>>.van-dialog__content .van-radio-group .van-radio .van-radio__icon .van-icon-success {
		line-height: 32px !important;
	}
</style>
